repository·main·Indexed 20 days ago
https://github.com/nuxt/scriptsA Nuxt module for loading third-party scripts with optimized performance, privacy, and developer experience. It features 20+ pre-configured integrations, built-in consent management, advanced loading triggers (such as onNuxtReady or element visibility), and the ability to serve scripts from your own origin via a privacy-focused proxy. Includes tools like useScriptNpm() for on-demand npm package loading and DevTools support for monitoring script status.
useHead for simple script tags, Nuxt Scripts offers fine-grained control over timing, privacy, and developer experience.Nuxt Scripts is designed to improve privacy, performance, and developer experience when handling third-party scripts in Nuxt applications.
You can manage the visibility of an overlay using two patterns:
Uncontrolled (Component-managed): The overlay manages its own state. It is open by default. Use :default-open="false" to start the overlay in a closed state. Note that uncontrolled overlays starting closed cannot be opened programmatically later.
Controlled (Parent-managed): Bind v-model:open to a parent ref. This is the recommended pattern for popups or any overlay that needs to be toggled by user interaction (like clicking a marker). When v-model:open is bound, the defaultOpen prop is ignored; use the initial value of your bound ref instead.
Tip: Using v-model:open keeps the component mounted and toggles visibility via CSS, which is more performant than using v-if as it avoids remounting costs and preserves internal state.
<script setup lang="ts">
const open = ref(false)
</script>
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsMarker
:position="{ lat: -34.397, lng: 150.644 }"
@click="open = !open"
>
<ScriptGoogleMapsOverlayView
v-model:open="open"
anchor="bottom-center"
:offset="{ x: 0, y: -50 }"
>
<div class="custom-popup">
<button @click.stop="open = false">×</button>
<p>Any Vue content here</p>
</div>
</ScriptGoogleMapsOverlayView>
</ScriptGoogleMapsMarker>
</ScriptGoogleMaps>
</template>{postUrl}/embed/.static.cdninstagram.com are rewritten to proxy through your server.embed.js to allow for static rendering.The rendered embed loads no Instagram JavaScript, forwards no Meta Set-Cookie response, and sends image/asset requests to your Nuxt server. Instagram sees the server's connection rather than the visitor's.
Facade components are lightweight placeholder UI elements that wrap third-party scripts (like video embeds, payment modals, or chat widgets).
They solve two main problems:
Trade-offs to consider:
When using ScriptMapLibreMap, it is important to distinguish between the rendering engine and the data sources. MapLibre GL JS only handles the rendering and interaction; it does not provide the map data itself.
Nuxt Scripts allows you to control exactly when third-party scripts are executed to optimize performance and user experience.
Key loading features include:
onNuxtReady trigger, which executes after hydration during an idle period.First-Party Mode routes third-party script traffic through a reverse proxy on your own domain to improve privacy and bypass some ad blockers. It consists of three main mechanisms:
nuxt build, third-party scripts are downloaded and served as local assets from /_scripts/assets/[hash].js. This avoids direct DNS/connection setup to the vendor./_scripts/p/. This is achieved via build-time AST rewriting and client-side runtime wrappers that redirect fetch, sendBeacon, XMLHttpRequest, and Image calls.cookie and authorization before forwarding requests.Note: Anonymization reduces network and fingerprinting data but does not make an identified analytics payload (containing uid, email, etc.) anonymous if the SDK itself sends that data.
analytics.js patches history.pushState and listens for popstate events. This means that in a Nuxt application, route changes will automatically trigger fresh page views without requiring any additional manual configuration.The component manages the size parameter for the Google Static Maps API request based on the environment:
width and height props if both are provided as pixel values.640x400.To bypass this automatic measurement and ensure consistent API requests, provide the size prop explicitly (e.g., :size="'800x600'").
Setting partytown: true in useScript() options allows you to run a supported registry script in a web worker using Partytown. This requires @nuxtjs/partytown to be installed and configured.
Important Limitations:
When partytown: true is enabled, it takes an early SSR path. It immediately writes a <script type="text/partytown" src="…"> tag. This mode:
trigger, use, beforeInit, and warmupStrategy.loaded immediately.load() is a no-op.remove() only disconnects DevTools observation.proxy, reload(), and lifecycle callbacks are not available.Treat the Partytown return value as an implementation detail.
// Requires @nuxtjs/partytown
useScript('https://example.com/registry.js', {
partytown: true
})