第三方脚本
满足 Nuxt DX

Nuxt Scripts 允许您以更好的性能、隐私、安全性和 DX 加载第三方脚本。它包含许多开箱即用的流行第三方。

开始使用 GitHub 上点星

更佳的网页指标

在需要时加载脚本，使用最佳实践，默认情况下不会阻塞 Nuxt 应用程序的渲染。

保护用户的隐私

避免将用户数据泄露给不需要它的第三方脚本。确保您的脚本符合 GDPR。

以开发者体验为先

类型安全且支持 SSR 的组合函数，只要需要就可以使用。

安全的第三方

保护您的应用程序免受可能被入侵的第三方脚本的攻击。

一个强大的 API，拥有恰到好处的魔力

Nuxt Scripts 在第三方脚本之上提供了一个抽象层，提供 SSR 支持和类型安全，同时仍然允许您完全控制脚本加载的底层机制。

<script lang="ts" setup>
const { onLoaded, proxy } = useScriptGoogleAnalytics(
  { id: 'G-1234567' },
  { trigger: 'manual' }
)
// send events
proxy.gtag('config', 'UA-123456789-1')
// ..
onLoaded(() => {
  // script loaded
})
</script>

使用外观组件加速

Nuxt Scripts 开箱即用地提供了一些外观组件。

外观组件是假 UI 元素，在第三方脚本加载后会被替换，它们可以显著提高性能，同时仍然提供良好的用户体验，但是它们确实有一些权衡。

Google 地图

Nuxt Scripts快 11.9 倍

8%

70ms

100%

830ms

YouTube

Nuxt Scripts快 46.4 倍

2%

70ms

100%

3.3s

Vimeo

Nuxt Scripts快 3.7 倍

27%

70ms

100%

260ms

Intercom

Nuxt Scripts快 3.9 倍

26%

220ms

100%

850ms

*请注意，PageSpeed Insights 实验室数据是特定日期的快照，可能会有变化。我们将尽快更新本节，提供汇总结果和/或来自生产使用的现场数据。

好吃到停不下来的 Cookie 同意

Nuxt Scripts 旨在通过提供一个用于管理 Cookie 同意的简单 API 来改善最终用户的隐私。

所有脚本都可以根据用户同意条件加载，可以根据需要进行设置。

<script lang="ts" setup>
const cookieConsent = useScriptTriggerConsent()
const myScript = useScript('/my-script.js', {
  trigger: cookieConsent 
})
</script>
<template>
  <CookieConsent @accept="cookieConsent.accept()" />
</template>

更快的网络协作

Nuxt Scripts 由 Nuxt 核心团队设计和构建，并与 Google 的Chrome Aurora 团队合作。

Nuxt Scripts 正在由 Nuxt 核心团队和优秀的社区贡献者积极维护，我们欢迎所有贡献。

29

贡献者

观看来自专业人士的介绍视频。

尝试我们的 JS Confetti 教程

在这个有趣的交互式 Confetti 教程中，学习 Nuxt Scripts 的所有基本知识。