Third-Party Scripts
Meets Nuxt DX

Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX. It 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.

Developer Experience First

Type-safe and SSR friendly composables that just work wherever you need them.

Secure third-parties

Protect your app from third-party scripts that could be made 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 and while still giving you full low-level control over how a script is loaded.

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

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 Scripts 11.9x Faster

70ms

Iframe

100%

830ms

YouTube

Nuxt Scripts 46.4x Faster

70ms

Iframe

100%

3.3s

Vimeo

Nuxt Scripts 3.7x Faster

27%

70ms

Iframe

100%

260ms

Intercom

Nuxt Scripts 3.9x Faster

26%

220ms

Iframe

100%

850ms

*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 consent that's good enough to eat

Nuxt Scripts aims to improve end-user privacy by providing a simple API for managing cookie consent .

All scripts can be loaded conditionally based on user consent, set it up however you need.

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