Third-Party Scripts
Meets Nuxt DX
Meets Nuxt DX
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.
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
YouTube
Vimeo
Intercom
*Note that PageSpeed Insights lab data is a snapshot from a particular day, which tends to be variable.
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.
const consent = useScriptTriggerConsent()
useScript('https://analytics.example.com/track.js', {
trigger: consent
})
// grant consent when user accepts
consent.accept()Watch the intro videos from the pros.
A faster web collaboration
Nuxt Scripts was designed and built by the Nuxt core team in collaboration with the Chrome Aurora team at Google.
Nuxt Scripts is being actively maintained by the Nuxt core team and amazing community contributors, we welcome all contributions.
