Nuxt Scripts
与 Nuxt DX 结合

以更高的性能、更好的隐私、更强的安全性和更优的开发体验加载第三方脚本,它内置支持许多流行的第三方服务。

    更好的 Web Vitals

    在需要时加载脚本,遵循最佳实践,默认情况下不会阻塞 Nuxt 渲染。

    用户隐私保护

    避免将数据泄露给第三方脚本,确保您的脚本符合 GDPR 规定。

    开发者体验优先

    类型安全且支持 SSR 的组合函数,无论在何处使用都能正常工作。

    安全的第三方脚本

    保护您的应用免受可能被破坏的第三方脚本的影响。

一个功能强大的 API,带有恰到好处的魔力

Nuxt Scripts 在第三方脚本之上提供了一个抽象层,支持 SSR 和类型安全,同时仍然让你能够完全低层次地控制脚本的加载方式。

通过外观组件加速

Nuxt Scripts 开箱即提供了多个 外观组件

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

Google Maps

Nuxt Scripts 11.9x Faster
70ms

YouTube

Nuxt Scripts 46.4x Faster
70ms

Vimeo

Nuxt Scripts 3.7x Faster
70ms

Intercom

Nuxt Scripts 3.9x Faster
220ms

*Note that PageSpeed Insights lab data is a snapshot from a particular day, which tends to be variable. We will be updating this section with aggregated results and/or field data from production usage as soon as it's available.

足够美味的 Cookie 同意书

Nuxt Scripts 旨在通过提供一个用于管理 Cookie 同意的简单 API 来提升终端用户的隐私保护。

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

更快的网络协作

Nuxt Scripts 由 Nuxt 核心团队与 Google 的 Chrome Aurora 团队合作设计和开发。

Nuxt Scripts 正由 Nuxt 核心团队和出色的社区贡献者积极维护,我们欢迎所有贡献。

29
贡献者
GitHub User 5326365GitHub User 63512348GitHub User 372973GitHub User 28706372GitHub User 44604921GitHub User 1840026GitHub User 112468782GitHub User 3871688GitHub User 61299754GitHub User 49156174GitHub User 55046446GitHub User 32058490GitHub User 78473524GitHub User 15055321GitHub User 542319GitHub User 1280528GitHub User 13294791GitHub User 47783146GitHub User 640208GitHub User 7005614GitHub User 27797762GitHub User 39585600GitHub User 38922203GitHub User 2110083GitHub User 6649305GitHub User 198982749GitHub User 48835293GitHub User 44843408GitHub User 20923978

观看专业人士的介绍视频

以隐私为先的社交嵌入

在不加载第三方脚本的情况下嵌入 X(Twitter)和 Instagram 帖子。所有内容均在服务器端获取,并通过您的域进行代理。

零客户端 API 调用,无 Cookie,无跟踪。在显示丰富社交内容的同时保护您的用户隐私。

Alexander Lichter
Alexander Lichter
@TheAlexLichter

✨Time to talk about the newest official @nuxt_js module - Nuxt Scripts! And not only covering why it is useful and what it does, but using the underlying `useScript` composable to load a *custom script* right into a demo application. Don't miss it out! 💚 Link below 👇 https://t.co/UjefeB3Ny9

12:30 PM · Aug 30, 202494 likes

试试我们的 JS 彩带教程

在有趣的交互式彩带教程中学习 Nuxt Scripts 的所有基础知识。