通过 100+ 个技巧学习 Nuxt!

scripts
@nuxt/scripts

添加第三方脚本,无需牺牲性能。

nuxt-scripts-social-card

npm version npm downloads License Nuxt Volta

Nuxt Scripts

在 Nuxt 应用中为第三方脚本提供更好的隐私、性能和 DX。

!重要 Nuxt Scripts 处于 Beta 阶段,请谨慎使用,因为某些 API 可能会更改。

功能

  • 🪨 构建于 Unhead 之上
  • 🎁 20+ 个第三方脚本集成,具有细粒度的性能优化
  • 🏎️ 性能:自托管、高级脚本加载触发器、最佳实践默认值。
  • 🕵️ 隐私:默认保护最终用户身份,脚本许可管理 API。
  • 🪵 DevTools:查看脚本及其状态,并查看函数日志
  • 🚀 0 依赖项,~2kb 最小运行时

背景

使用 useHead 组合式函数加载第三方 IIFE 脚本很容易。但是,围绕 SSR、延迟加载和类型安全,事情很快变得复杂起来。

创建 Nuxt Scripts 是为了解决这些问题以及更多问题,目标是使第三方脚本更高效、具有更好的隐私性并提供更好的 DX 体验。

🚀 快速开始

要开始使用,只需运行

npx nuxi@latest module add scripts

就是这样!Nuxt Scripts 模块应该被下载并添加到您的 Nuxt Config modules 中。

⛰️ 下一步

需要一些灵感来开始使用 Nuxt Scripts 吗?试试以下方法

  1. 🎉 通过 Confetti 教程让表情符号雨!
  2. 📚 了解脚本加载的工作原理。
  3. 🔍 浏览脚本注册表,查找流行的预配置第三方脚本。
  4. 🚀 使用 useScript全局脚本加载其他脚本。
  5. 🔨 通过捆绑许可管理微调您的性能和隐私。

⚖️ 许可证

根据 MIT 许可证获得许可。