👨‍🏫 The Mastering Nuxt 3 course is now completed!

Discover the course
partytown

Partytown integration for Nuxt - relocate resource intensive scripts into a web worker, and off of the main thread.

@nuxtjs/partytown

npm versionnpm downloadsGithub Actions CICodecovLicense

Partytown integration for Nuxt

Features

  • 👌 Zero-config required
  • 🔥 Relocates resource intensive scripts into a web worker
  • ⚡️ Speeds up your site
  • 💯 Nuxt 3 and Nuxt Bridge support

Quick setup

  1. Install @nuxtjs/partytown!
    yarn add --dev @nuxtjs/partytown # or npm install --save-dev @nuxtjs/partytown
  2. Add it to the modules section of nuxt.config.ts
    export default defineNuxtConfig({
    modules: ['@nuxtjs/partytown'],
    })
  3. 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>

Configuration

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

Example Configurations

Crisp

export default defineNuxtConfig({
modules: ['@nuxtjs/partytown'],
partytown: {
forward: ['$crisp', '$crisp.push'],
},
app: {
head: {
script: [
// Insert your CRISP Script here e.g.:
{ children: 'window.$crisp = []; window.CRISP_WEBSITE_ID = "0000"' },
{ src: 'https://client.crisp.chat/l.js', async: true, type: 'text/partytown' },
],
},
},
})

Google Tag Manager

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

Plausible Analytics

export default defineNuxtConfig({
modules: ['@nuxtjs/partytown'],
partytown: {
forward: ['$plausible', '$plausible.push'],
},
app: {
head: {
script: [
{ children: 'window.$plausible = [];' },
// Update this
{
src: 'https://plausible.io/js/script.js',
defer: true,
type: 'text/partytown',
'data-domain': 'your-domains',
},
],
},
},
})

Development

  • Run yarn prepare to generate type stubs.
  • Use yarn dev to start playground in development mode.

Licence

MIT Licence