---
title: "Nuxt Scripts 中文文档 - 第三方脚本与 Nuxt DX 的结合"
canonical_url: "https://nuxt-scripts.zhcndoc.com/"
last_updated: "2026-09-23T10:32:59.214Z"
meta:
  description: "通过 Nuxt Scripts 以更好的性能、隐私、安全性和开发体验来管理第三方脚本。"
  "og:description": "通过 Nuxt Scripts 以更好的性能、隐私、安全性和开发体验来管理第三方脚本。"
  "og:title": "Nuxt Scripts 中文文档 - 第三方脚本与 Nuxt DX 的结合"
---

Nuxt Scripts home

在 GitHub 上查看 Nuxt Scripts

[**v1 稳定版已发布 **](https://nuxt-scripts.zhcndoc.com/docs/releases/v1)

# 第三方脚本<br>** 与 Nuxt DX 的结合 **

以更好的性能、隐私、安全性和开发体验加载第三方脚本，并开箱提供大量常见服务。

[立即开始](https://nuxt-scripts.zhcndoc.com/docs/getting-started) [去 GitHub 点星](https://github.com/nuxt/scripts)

[Ahrefs Web Analytics](https://nuxt-scripts.zhcndoc.com/scripts/ahrefs-analytics) [Plausible Analytics](https://nuxt-scripts.zhcndoc.com/scripts/plausible-analytics) [Cloudflare Web Analytics](https://nuxt-scripts.zhcndoc.com/scripts/cloudflare-web-analytics) [Vercel Analytics](https://nuxt-scripts.zhcndoc.com/scripts/vercel-analytics) [PostHog](https://nuxt-scripts.zhcndoc.com/scripts/posthog) [Fathom Analytics](https://nuxt-scripts.zhcndoc.com/scripts/fathom-analytics) [Matomo Analytics](https://nuxt-scripts.zhcndoc.com/scripts/matomo-analytics) [Rybbit Analytics](https://nuxt-scripts.zhcndoc.com/scripts/rybbit-analytics) [Databuddy Analytics](https://nuxt-scripts.zhcndoc.com/scripts/databuddy-analytics) [Segment](https://nuxt-scripts.zhcndoc.com/scripts/segment) [Mixpanel](https://nuxt-scripts.zhcndoc.com/scripts/mixpanel-analytics) [![Pulse Analytics logo](https://cdn.ciphera.net/pulse/pulse_icon_64.png)](https://nuxt-scripts.zhcndoc.com/scripts/pulse-analytics "Pulse Analytics") [Bing UET](https://nuxt-scripts.zhcndoc.com/scripts/bing-uet) [Meta Pixel](https://nuxt-scripts.zhcndoc.com/scripts/meta-pixel) [X Pixel](https://nuxt-scripts.zhcndoc.com/scripts/x-pixel) [TikTok Pixel](https://nuxt-scripts.zhcndoc.com/scripts/tiktok-pixel) [Snapchat Pixel](https://nuxt-scripts.zhcndoc.com/scripts/snapchat-pixel) [Reddit Pixel](https://nuxt-scripts.zhcndoc.com/scripts/reddit-pixel) [LinkedIn Insight Tag](https://nuxt-scripts.zhcndoc.com/scripts/linkedin-insight) [Google Adsense](https://nuxt-scripts.zhcndoc.com/scripts/google-adsense) [Intercom](https://nuxt-scripts.zhcndoc.com/scripts/intercom) [Hotjar](https://nuxt-scripts.zhcndoc.com/scripts/hotjar) [![Clarity logo](https://store-images.s-microsoft.com/image/apps.29332.512b1d3d-80ec-4aec-83bb-411008d2f7cd.76371b6f-9386-463f-bfb0-b75cffb86a4f.bd99f4b1-b18e-4380-aa79-93768763c90d.png)](https://nuxt-scripts.zhcndoc.com/scripts/clarity "Clarity") [Stripe](https://nuxt-scripts.zhcndoc.com/scripts/stripe) [Lemon Squeezy](https://nuxt-scripts.zhcndoc.com/scripts/lemon-squeezy) [PayPal](https://nuxt-scripts.zhcndoc.com/scripts/paypal) [Vimeo Player](https://nuxt-scripts.zhcndoc.com/scripts/vimeo-player) [YouTube Player](https://nuxt-scripts.zhcndoc.com/scripts/youtube-player)

## **更好的 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、零第三方请求。

Privacy and performance comparison between Nuxt Scripts and native social embeds

| **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 |

### 社交嵌入实时演示

当此区域接近视口时，将加载社交平台的实时演示。

## **看看专业人士的入门视频。 **

![Play video](https://i.ytimg.com/vi_webp/sjMqUUvH9AE/hq720.webp)

![Play video](https://i.ytimg.com/vi_webp/jDQtxlRUf54/hq720.webp)

## 更快的 Web 协作

Nuxt Scripts 由 Nuxt 核心团队与 Google 的 [~~Chrome Aurora~~](https://developer.chrome.com/aurora) 团队协作设计和构建。

Nuxt Scripts 由 Nuxt 核心团队和优秀的社区贡献者持续维护，欢迎所有贡献。

## **Community Funded **

Nuxt Scripts is free and open-source thanks to generous community sponsors.

[**Become a sponsor **](https://github.com/sponsors/harlan-zw)

The sponsor list is unavailable right now.

## **试试我们的 JS 彩带教程 **

通过有趣的交互彩带教程学习 Nuxt Scripts 的全部基础。

[**立即开始 **](https://nuxt-scripts.zhcndoc.com/docs/getting-started/confetti-tutorial)

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.