--- title: "Nuxt Scripts 中文文档 - 第三方脚本与 Nuxt DX 的结合" canonical_url: "https://nuxt-scripts.zhcndoc.com/" last_updated: "2026-05-22T14:11:34.576Z" meta: description: "通过 Nuxt Scripts 以更好的性能、隐私、安全性和开发体验来管理第三方脚本。" "og:description": "通过 Nuxt Scripts 以更好的性能、隐私、安全性和开发体验来管理第三方脚本。" "og:title": "Nuxt Scripts 中文文档 - 第三方脚本与 Nuxt DX 的结合" --- ``` 在 GitHub 上查看 Nuxt Scripts # 第三方脚本** 与 Nuxt DX 的结合 ** 以更好的性能、隐私、安全性和开发体验加载第三方脚本，并开箱提供大量常见服务。 [立即开始](https://nuxt-scripts.zhcndoc.com/docs/getting-started) [去 GitHub 点星](https://github.com/nuxt/scripts) Plausible Analytics](https://nuxt-scripts.zhcndoc.com/scripts/plausible-analytics) Cloudflare Web Analytics](https://nuxt-scripts.zhcndoc.com/scripts/cloudflare-web-analytics "Cloudflare Web Analytics") Vercel Analytics](https://nuxt-scripts.zhcndoc.com/scripts/vercel-analytics "Vercel Analytics") PostHog](https://nuxt-scripts.zhcndoc.com/scripts/posthog "PostHog") Fathom Analytics](https://nuxt-scripts.zhcndoc.com/scripts/fathom-analytics "Fathom Analytics") Matomo Analytics](https://nuxt-scripts.zhcndoc.com/scripts/matomo-analytics "Matomo Analytics") Rybbit Analytics](https://nuxt-scripts.zhcndoc.com/scripts/rybbit-analytics "Rybbit Analytics") Databuddy Analytics](https://nuxt-scripts.zhcndoc.com/scripts/databuddy-analytics "Databuddy Analytics") Segment](https://nuxt-scripts.zhcndoc.com/scripts/segment "Segment") Mixpanel](https://nuxt-scripts.zhcndoc.com/scripts/mixpanel-analytics "Mixpanel") Bing UET](https://nuxt-scripts.zhcndoc.com/scripts/bing-uet "Bing UET") Meta Pixel](https://nuxt-scripts.zhcndoc.com/scripts/meta-pixel "Meta Pixel") X Pixel](https://nuxt-scripts.zhcndoc.com/scripts/x-pixel "X Pixel") TikTok Pixel](https://nuxt-scripts.zhcndoc.com/scripts/tiktok-pixel "TikTok Pixel") Snapchat Pixel](https://nuxt-scripts.zhcndoc.com/scripts/snapchat-pixel "Snapchat Pixel") Reddit Pixel](https://nuxt-scripts.zhcndoc.com/scripts/reddit-pixel "Reddit Pixel") Google Adsense](https://nuxt-scripts.zhcndoc.com/scripts/google-adsense "Google Adsense") Intercom](https://nuxt-scripts.zhcndoc.com/scripts/intercom "Intercom") Hotjar](https://nuxt-scripts.zhcndoc.com/scripts/hotjar "Hotjar")Clarity](https://nuxt-scripts.zhcndoc.com/scripts/clarity) Stripe](https://nuxt-scripts.zhcndoc.com/scripts/stripe "Stripe") Lemon Squeezy](https://nuxt-scripts.zhcndoc.com/scripts/lemon-squeezy "Lemon Squeezy") PayPal](https://nuxt-scripts.zhcndoc.com/scripts/paypal "PayPal") Vimeo Player](https://nuxt-scripts.zhcndoc.com/scripts/vimeo-player "Vimeo Player") YouTube Player](https://nuxt-scripts.zhcndoc.com/scripts/youtube-player "YouTube Player") Google Maps](https://nuxt-scripts.zhcndoc.com/scripts/google-maps "Google Maps") Bluesky Embed](https://nuxt-scripts.zhcndoc.com/scripts/ "Bluesky Embed") Instagram Embed](https://nuxt-scripts.zhcndoc.com/scripts/ "Instagram Embed") X Embed](https://nuxt-scripts.zhcndoc.com/scripts/ "X Embed") Crisp](https://nuxt-scripts.zhcndoc.com/scripts/crisp "Crisp") Google reCAPTCHA](https://nuxt-scripts.zhcndoc.com/scripts/google-recaptcha "Google reCAPTCHA") Google Sign-In](https://nuxt-scripts.zhcndoc.com/scripts/google-sign-in "Google Sign-In") Google Tag Manager](https://nuxt-scripts.zhcndoc.com/scripts/google-tag-manager "Google Tag Manager") Google Analytics](https://nuxt-scripts.zhcndoc.com/scripts/google-analytics "Google Analytics") Umami Analytics](https://nuxt-scripts.zhcndoc.com/scripts/umami-analytics "Umami Analytics") Gravatar](https://nuxt-scripts.zhcndoc.com/scripts/gravatar "Gravatar") ### **更好的 Web 指标** 默认采用最佳实践，在需要时再加载脚本，避免阻塞 Nuxt 应用的渲染。 ### **保护用户隐私** 避免将用户数据泄露给并不需要这些数据的第三方脚本，并帮助脚本保持符合 GDPR。 ### **安全接入第三方** 保护你的应用免受可能被攻陷的第三方脚本影响。 ## **具备 ***恰到好处*** 魔法的强大 API ** Nuxt Scripts 在第三方脚本之上提供一层抽象，带来 SSR 支持和类型安全，同时仍让你完全掌控脚本的加载方式。 app.vue ``` const { proxy } = useScript('/tracker.js', { trigger: 'onNuxtReady', use() { return { trackEvent: window.trackEvent } } }) // fully typed, SSR safe proxy.trackEvent('page_view') ``` ## 用 Facade 组件提速 Nuxt Scripts 开箱提供多个 [~~Facade 组件 ~~](https://developer.chrome.com/docs/lighthouse/performance/third-party-facades)。 Facade 组件是一种占位式 UI，在第三方脚本加载后才会被替换；它们能显著提升性能，同时仍保留良好的用户体验，不过也存在 [~~取舍 ~~](https://nuxt-scripts.zhcndoc.com/docs/guides/facade-components). ### **Google Maps** **Nuxt Scripts****11.9x Faster ** 70ms **Iframe** 830ms ### **YouTube** **Nuxt Scripts****46.4x Faster ** 70ms **Iframe** 3.3s ### **Vimeo** **Nuxt Scripts****3.7x Faster ** 70ms **Iframe** 260ms ### **Intercom** **Nuxt Scripts****3.9x Faster ** 220ms **Iframe** 850ms *请注意，PageSpeed Insights 的实验室数据只是某一天的快照，通常会有波动。 ## **按服务商类型化的 Cookie 同意管理 ** 每个支持同意管理的脚本都会返回一个与服务商原生 API 对应的 `consent` 对象，并在首次调用前应用 `defaultConsent`。 包括 Google Consent Mode v2、Meta grant/revoke、Matomo give/forget、TikTok 三态模式等。你也可以对接 OneTrust 或 Cookiebot，或者使用 [~~useScriptTriggerConsent ~~](https://nuxt-scripts.zhcndoc.com/docs/guides/consent) 自己实现横幅。 consent.ts ``` const { consent } = useScriptGoogleAnalytics({ id: 'G-XXXXXXXX', defaultConsent: { ad_storage: 'denied', analytics_storage: 'denied', }, }) // Google Consent Mode v2 consent.update({ ad_storage: 'granted', analytics_storage: 'granted', }) ``` ## **隐私优先的社交嵌入 ** 无需加载第三方脚本即可嵌入 X、Instagram 和 Bluesky 的帖子。所有内容都由服务端获取，并通过你的域名代理。 零客户端 JavaScript、零 Cookie、零第三方请求。 | **Nuxt Scripts 对比原生方案 ** | X | Instagram | Bluesky | | --- | --- | --- | --- | | 客户端 JS | **0**vs475 KB | **0**vs580 KB | **0**vs42 KB | | 请求数 | **0**vs25 | **0**vs34 | **0**vs9 | | Cookie | **No**vsYes | **No**vsYes | **No**vsNo | | 阻塞时间 | **0ms**vs1,010ms | **0ms**vs780ms | **0ms**vs60ms | ![Alexander Lichter](https://nuxt-scripts.zhcndoc.com/_scripts/embed/x-image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1705927743769026560%2F13XlDKGO_normal.jpg) **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, 20240 回复0 喜欢 __[![cloudflare](https://nuxt-scripts.zhcndoc.com/_scripts/embed/instagram-image?url=https%3A%2F%2Fscontent-hkg1-2.cdninstagram.com%2Fv%2Ft51.2885-19%2F291788865_1052446648810639_8402624417549329982_n.jpg%3Fstp%3Ddst-jpg_s150x150_tt6%26efg%3DeyJ2ZW5jb2RlX3RhZyI6InByb2ZpbGVfcGljLmRqYW5nby4xMDgwLmMyIn0%26_nc_ht%3Dscontent-hkg1-2.cdninstagram.com%26_nc_cat%3D107%26_nc_oc%3DQ6cZ2gHPYgoZIDtGLuV87rPyTdL474bUbku94DoBj_QGERO-lcVDmvHrEhLldMS0nbfBD0s%26_nc_ohc%3DBo5nVSb-jnkQ7kNvwE-sN6e%26_nc_gid%3D2EbFrCOFljF59KLlOnKCNw%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26oh%3D00_Af7RyviBOK8Whk7tcmzWs7Zhi3DAMUnKBTnndqCVxd54Iw%26oe%3D6A162943%26_nc_sid%3D10d13b)](https://www.instagram.com/stories/cloudflare/?ig_rid=da00bd80-b540-40e1-8312-f4d0b17bfeab) [cloudflare_已驗證_](https://www.instagram.com/cloudflare/?ig_rid=da00bd80-b540-40e1-8312-f4d0b17bfeab) 70.0K followers [View profile](https://www.instagram.com/cloudflare/?ig_rid=da00bd80-b540-40e1-8312-f4d0b17bfeab) [![Instagram post shared by @cloudflare](https://nuxt-scripts.zhcndoc.com/_scripts/embed/instagram-image?url=https%3A%2F%2Flookaside.instagram.com%2Fseo%2Fgoogle_widget%2Fcrawler%2F%3Fmedia_id%3D3301863824267753672)](https://www.instagram.com/p/C3Sk6d2MTjI/?ig_rid=da00bd80-b540-40e1-8312-f4d0b17bfeab) [![cloudflare](https://nuxt-scripts.zhcndoc.com/_scripts/embed/instagram-image?url=https%3A%2F%2Fscontent-hkg1-2.cdninstagram.com%2Fv%2Ft51.2885-19%2F291788865_1052446648810639_8402624417549329982_n.jpg%3Fstp%3Ddst-jpg_s150x150_tt6%26efg%3DeyJ2ZW5jb2RlX3RhZyI6InByb2ZpbGVfcGljLmRqYW5nby4xMDgwLmMyIn0%26_nc_ht%3Dscontent-hkg1-2.cdninstagram.com%26_nc_cat%3D107%26_nc_oc%3DQ6cZ2gHPYgoZIDtGLuV87rPyTdL474bUbku94DoBj_QGERO-lcVDmvHrEhLldMS0nbfBD0s%26_nc_ohc%3DBo5nVSb-jnkQ7kNvwE-sN6e%26_nc_gid%3D2EbFrCOFljF59KLlOnKCNw%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26oh%3D00_Af7RyviBOK8Whk7tcmzWs7Zhi3DAMUnKBTnndqCVxd54Iw%26oe%3D6A162943%26_nc_sid%3D10d13b)cloudflare_已驗證_1,526 posts · 70K followers](https://www.instagram.com/cloudflare/?ig_rid=da00bd80-b540-40e1-8312-f4d0b17bfeab) [View more on Instagram](https://www.instagram.com/cloudflare/?ig_rid=da00bd80-b540-40e1-8312-f4d0b17bfeab) [____](https://www.instagram.com/p/C3Sk6d2MTjI/?ig_rid=da00bd80-b540-40e1-8312-f4d0b17bfeab) [_回應_](https://www.instagram.com/p/C3Sk6d2MTjI/?ig_rid=da00bd80-b540-40e1-8312-f4d0b17bfeab) [_分享_](https://www.instagram.com/p/C3Sk6d2MTjI/?ig_rid=da00bd80-b540-40e1-8312-f4d0b17bfeab) [_儲存_](https://www.instagram.com/p/C3Sk6d2MTjI/?ig_rid=da00bd80-b540-40e1-8312-f4d0b17bfeab) [50 likes](https://www.instagram.com/p/C3Sk6d2MTjI/?ig_rid=da00bd80-b540-40e1-8312-f4d0b17bfeab) [Add a comment...](https://www.instagram.com/p/C3Sk6d2MTjI/?ig_rid=da00bd80-b540-40e1-8312-f4d0b17bfeab) [_Instagram_](https://www.instagram.com/p/C3Sk6d2MTjI/?ig_rid=da00bd80-b540-40e1-8312-f4d0b17bfeab) ![Jakub Andrzejewski](https://nuxt-scripts.zhcndoc.com/_scripts/embed/bluesky-image?url=https%3A%2F%2Fcdn.bsky.app%2Fimg%2Favatar%2Fplain%2Fdid%3Aplc%3Ajxg2atjncgistoagvc6qkjx3%2Fbafkreigcwa6nq7vmu72wo5sqomkvhwxyl5u6u6rqf5q5qjua4t6ppmqsfy) **Jakub Andrzejewski** @jacobandrewsky.bsky.social Are you struggling with third party scripts affecting performance of your [@nuxt.com](https://bsky.app/profile/did:plc:6gbm7hkapyhjt2jghosdzwv2) application? 🤔 Check out Nuxt Scripts module that brings several solutions to this problem with the amazing Developer Experience! 🚀 [scripts.nuxt.com](https://scripts.nuxt.com/) 11:12 AM · Apr 1, 20250 replies0 reposts4 likes ## **看看专业人士的入门视频。 ** ## 更快的 Web 协作 Nuxt Scripts 由 Nuxt 核心团队与 Google 的 [~~Chrome Aurora~~](https://developer.chrome.com/aurora) 团队协作设计和构建。 Nuxt Scripts 由 Nuxt 核心团队和优秀的社区贡献者持续维护，欢迎所有贡献。 ## **试试我们的 JS 彩带教程 ** 通过有趣的交互彩带教程学习 Nuxt Scripts 的全部基础。 [**立即开始 **](https://nuxt-scripts.zhcndoc.com/docs/getting-started/confetti-tutorial)