@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

Install @nuxtjs/partytown!

yarn add --dev @nuxtjs/partytown # or npm install --save-dev @nuxtjs/partytown

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

import { defineNuxtConfig } from 'nuxt'export 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>

Configuration

Partytown supports a number of options, which you can pass in your nuxt.config.ts file:

import { defineNuxtConfig } from 'nuxt'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

import { defineNuxtConfig } from 'nuxt'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

import { defineNuxtConfig } from 'nuxt'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

import { defineNuxtConfig } from 'nuxt'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