You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A simpler method is now available: directly input the script URL into `scripts.globals`. You can also include optional settings to tailor the script loading process with specific optimizations in mind.
25
19
26
-
## How it Works
20
+
You may consider using global scripts when:
21
+
- The script isn't a supported [Registry Script](/docs/api/use-script#registry-script).
22
+
- You don't care about interacting with the API provided by the third-party script (e.g. you don't need to use `gtag` from Google Analytics).
23
+
- You are interacting with the API provided by the third-party script, but you don't care about type safety.
24
+
25
+
Otherwise, it's recommended to use [useScript](/docs/api/use-script) to load scripts in a safer way.
26
+
27
+
## Usage
28
+
29
+
The `globals` key supports strings, objects and arrays.
30
+
31
+
**Example: Load a script using just the src**
32
+
33
+
```ts
34
+
exportdefaultdefineNuxtConfig({
35
+
scripts: {
36
+
globals: {
37
+
myScript: 'https://analytics.com/tracker.js',
38
+
}
39
+
}
40
+
})
41
+
```
42
+
43
+
**Example: Load a script while providing extra script attributes**
44
+
45
+
```ts
46
+
exportdefaultdefineNuxtConfig({
47
+
scripts: {
48
+
globals: {
49
+
myScript: {
50
+
src: 'https://example.com/script.js',
51
+
integrity: 'sha256-abc123',
52
+
}
53
+
}
54
+
}
55
+
})
56
+
```
57
+
58
+
59
+
You can optionally provide the script as an array which allows you to provide [Script Options](/docs/api/use-script#NuxtUseScriptOptions).
60
+
61
+
```ts
62
+
exportdefaultdefineNuxtConfig({
63
+
scripts: {
64
+
globals: {
65
+
myScript: [
66
+
{ src: 'https://example.com/script.js' },
67
+
// load the script as part of the hydration process instead of on idle
68
+
{ trigger: 'client' }
69
+
]
70
+
}
71
+
}
72
+
})
73
+
```
27
74
28
-
The `globals` configuration will be used to create a virtual Nuxt plugin that loads in the script using the `useScript` composable. This allows for the script to be loaded in with best practices in mind.
75
+
### Accessing a global script
29
76
30
-
This also means you can access your script anywhere in your Nuxt app without triggering the script to be loaded again.
77
+
All Nuxt Scripts are registered on the `$scripts`Nuxt App property.
31
78
32
-
For example, if we're loading in a tracking script we can use the `useScript` composable to access the underlying API.
79
+
For scripts registered through nuxt.config, type autocompletion is available.
80
+
81
+
```vue
82
+
<script setup lang="ts">
83
+
const { $scripts } = useNuxtApp()
84
+
$scripts.myScript // { $script, instance }
85
+
</script>
86
+
```
87
+
88
+
## How it Works
89
+
90
+
The `globals` configuration will be used to create a virtual Nuxt plugin that loads in the script using the `useScript` composable.
91
+
92
+
As `useScript` is being used under the hood, it's important to understand the defaults and behavior of the [useScript](/api/use-script) composable..
33
93
34
94
::code-group
35
95
36
96
```ts [nuxt.config.ts]
37
97
exportdefaultdefineNuxtConfig({
38
98
scripts: {
39
-
globals: [
40
-
'https://analytics.com/tracker.js',
41
-
]
99
+
globals: {
100
+
tracker: 'https://analytics.com/tracker.js',
101
+
}
42
102
}
43
103
})
44
104
```
45
105
46
106
```vue [components/Tracking.vue]
47
107
<script setup lang="ts">
48
108
// This will not trigger the script to be loaded again because of the nuxt.config global script
0 commit comments