- 👌 Zero-config required
- 🔥 Relocates resource intensive scripts into a web worker
- ⚡️ Speeds up your site
- 💯 Nuxt 3 and Nuxt Bridge support
-
Install
@nuxtjs/partytown!npx nuxi@latest module add partytown
-
Add it to the
modulessection ofnuxt.config.tsexport default defineNuxtConfig({ modules: ['@nuxtjs/partytown'], })
-
Add
type: 'text/partytown'attribute to any scripts you want to be handled by partytown.<template> <div> <Script type="text/partytown" src="https://example.com/analytics.js" /> </div> </template>
Partytown supports a number of options, which you can pass in your nuxt.config.ts file:
export default defineNuxtConfig({
// ...
partytown: {
/**
* When `true`, Partytown scripts are not minified. See https://partytown.builder.io/configuration
* on how to enable more logging.
*
* @default true in development
*/
debug: boolean
/**
* Path (relative to your base URL) where the Partytown library should be served from.
*
* @default '~partytown'
*/
lib: string
// For other options, see https://partytown.builder.io/configuration
},
})export default defineNuxtConfig({
modules: ['@nuxtjs/partytown'],
partytown: {
forward: ['$crisp', '$crisp.push'],
},
app: {
head: {
script: [
// Insert your CRISP Script here e.g.:
{ innerHTML: 'window.$crisp = []; window.CRISP_WEBSITE_ID = "0000"' },
{ src: 'https://client.crisp.chat/l.js', async: true, type: 'text/partytown' },
],
},
},
})export default defineNuxtConfig({
modules: ['@nuxtjs/partytown'],
partytown: {
forward: ['dataLayer.push'],
},
app: {
head: {
script: [
// Insert your Google Tag Manager Script here
{ src: '-', async: true, type: 'text/partytown' },
],
},
},
})export default defineNuxtConfig({
modules: ['@nuxtjs/partytown'],
partytown: {
forward: ['$plausible', '$plausible.push'],
},
app: {
head: {
script: [
{ innerHTML: 'window.$plausible = [];' },
// Update this
{
src: 'https://plausible.io/js/script.js',
defer: true,
type: 'text/partytown',
'data-domain': 'your-domains',
},
],
},
},
})- Run
yarn prepareto generate type stubs. - Use
yarn devto start playground in development mode.