Nuxt Scripts

Better Privacy, Performance, and DX for Third-Party Scripts in Nuxt Apps.

• 👾  Playground

[!IMPORTANT]
Nuxt Scripts is in beta, use with caution as some APIs may change.

Features

• 🪨 Built on top of Unhead Script Loading
• 🎁 20+ third-party scripts integrations with fine-grained performance optimizations
• 🏎️ Performance: Self hosting, advanced script loading triggers, best-practice defaults.
• 🕵️ Privacy: Defaults to protect end users identity, script consent management APIs.
• 🪵 DevTools: View your script with their status and see function logs
• 🚀 0 dependencies, ~2kb minimal runtime

Background

Loading third-party IIFE scripts using useHead composable is easy. However,
things start getting more complicated quickly around SSR, lazy loading, and type safety.

Nuxt Scripts solves these issues and more with the goal of making third-party scripts more performant,
have better privacy and be better DX overall.

🚀 Quick Start

To get started, simply run:

npx nuxi@latest module add scripts

[!TIP]
Generate an Agent Skill for this package using skilld:

npx skilld add @nuxt/scripts

That’s it. The Nuxt Scripts module should be downloaded and added to your Nuxt Config modules.

📦 Examples

Explore live examples on StackBlitz:

• Cookie Consent - Google Consent Mode v2 with GTM
• Granular Consent - Per-category consent management
• Custom Script - Integrating any third-party script
• Performance - Optimize loading with triggers

⛰️ Next Steps

Need some inspiration to start using Nuxt Scripts? Try out the following:

1. 🎉 Make it rain emojis with the Confetti Tutorial.
2. 📚 Learn about how the Script Loading works.
3. 🔍 Explore the Script Registry for popular pre-configured third-party scripts.
4. 🚀 Load other scripts with useScript or Global Scripts.
5. 🔨 Fine-tune your performance and privacy with Bundling and Consent Management.

⚖️ License

Licensed under the MIT license.