Load Third-Party Scripts
with Nuxt Scripts

Load third-party scripts with better performance, privacy, security and DX. Includes many popular third-parties out of the box.

Get started Star on GitHub

Better Web Vitals

Load scripts when they're needed with best practices non-blocking the rendering of your Nuxt app by default.

Privacy for your users

Avoid leaking user data to third-party scripts that don't need it. Ensure your scripts are GDPR compliant.

Secure third-parties

Protect your app from third-party scripts that could be compromised.

A powerful API with just enough magic

Nuxt Scripts provides an abstraction layer on top of third-party scripts, providing SSR support and type-safety while still giving you full low-level control over how a script is loaded.

app.vue

const { proxy } = useScript('/tracker.js', {
  trigger: 'onNuxtReady',
  use() {
    return { trackEvent: window.trackEvent }
  }
})

// fully typed, SSR safe
proxy.trackEvent('page_view')

Speed up with Facade Components

Nuxt Scripts provides several Facade Components out of the box.

Facade components are fake UI elements that get replaced once a third-party script loads, they can significantly improve your performance while still providing a great user experience, however they do have trade-offs .

Google Maps

Nuxt Scripts11.9x Faster

70ms

Iframe

830ms

YouTube

Nuxt Scripts46.4x Faster

70ms

Iframe

3.3s

Vimeo

Nuxt Scripts3.7x Faster

70ms

Iframe

260ms

Intercom

Nuxt Scripts3.9x Faster

220ms

Iframe

850ms

*Note that PageSpeed Insights lab data is a snapshot from a particular day, which tends to be variable.

Cookie consent, typed per vendor

Every consent-aware script returns a consent object matching the vendor's native API, paired with defaultConsent applied before the first call.

Google Consent Mode v2, Meta grant/revoke, Matomo give/forget, TikTok three-state and more. Bridge OneTrust or Cookiebot, or ship your own banner with useScriptTriggerConsent .

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',
})