feat: global script registration

README.md

@@ -65,6 +65,23 @@ addConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })
 
 ## Guides
 
+### Loading Scripts Globally
+
+If you prefer a config based approach, you can load scripts globally by defining them in your `nuxt.config.ts`.
+
+```ts
+export default defineNuxtConfig({
+  scripts: {
+    globals: [
+      'https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js',
+      {
+        assetStrategy: 'bundle'
+      }
+    ]
+  }
+})
+```
+
 ### Bundling Scripts
 
 Bundling scripts can allow you to serve them from your own server, improving privacy and performance. It

playground/nuxt.config.ts

@@ -6,6 +6,9 @@ export default defineNuxtConfig({
   ],
   devtools: { enabled: true },
   scripts: {
+    globals: [
+      'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js',
+    ],
     overrides: {
       'cloudflare-turnstile': {
         assetStrategy: 'bundle',

src/module.ts

@@ -1,17 +1,21 @@
-import { addBuildPlugin, addImportsDir, createResolver, defineNuxtModule } from '@nuxt/kit'
+import { addBuildPlugin, addImportsDir, addPlugin, addTemplate, createResolver, defineNuxtModule } from '@nuxt/kit'
 import { readPackageJSON } from 'pkg-types'
-import type { NuxtUseScriptOptions } from './runtime/types'
+import type { NuxtUseScriptInput, NuxtUseScriptOptions } from './runtime/types'
 import { setupDevToolsUI } from './devtools'
 import { NuxtScriptAssetBundlerTransformer } from './plugins/transform'
 import { setupPublicAssetStrategy } from './assets'
 import { logger } from './logger'
 
 export interface ModuleOptions {
+  /**
+   * Register scripts that should be loaded globally on all pages.
+   */
+  globals?: (NuxtUseScriptInput | [NuxtUseScriptInput, NuxtUseScriptOptions])[]
   /**
    * Override the static script options for specific scripts based on their provided `key` or `src`.
    */
   overrides?: {
-    [key: string]: Pick<NuxtUseScriptOptions, 'assetStrategy' | 'skipEarlyConnections'>
+    [key: string]: Pick<NuxtUseScriptOptions, 'assetStrategy'>
   }
   /** Configure the way scripts assets are exposed */
   assets?: {
@@ -70,6 +74,27 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.runtimeConfig['nuxt-scripts'] = { version }
     addImportsDir(resolve('./runtime/composables'))
 
+    if (config.globals?.length) {
+      // create a virtual plugin
+      const template = addTemplate({
+        filename: 'modules/nuxt-scripts/plugin.client.mjs',
+        getContents() {
+          return `import { defineNuxtPlugin, useScript } from '#imports'
+export default defineNuxtPlugin({
+  setup() {
+          ${config.globals?.map(g => typeof g === 'string'
+            ? ` useScript("${g}")`
+            : ` useScript(${JSON.stringify(g[0])}, ${JSON.stringify(g[1])} })`).join('\n')}
+  }
+})`
+        },
+      })
+      addPlugin({
+        src: template.dst,
+        mode: 'client',
+      })
+    }
+
     const scriptMap = new Map<string, string>()
     const { normalizeScriptData } = setupPublicAssetStrategy(config.assets)