@nuxtjs/partytown

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!

   npx nuxi@latest module add partytown

2. Add it to the modules section of nuxt.config.ts

   exportdefaultdefineNuxtConfig({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:

exportdefaultdefineNuxtConfig({// ...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

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

Google Tag Manager

exportdefaultdefineNuxtConfig({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

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

Development

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

Licence

MIT Licence