@nuxtjs/partytown

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

16.1K downloads•341 stars•v1.6.0

danielroe

@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!
```
npx nuxi@latest module add partytown
```

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

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:

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.:
        { innerHTML: '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: [
        { 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