Skip to content

Partytown integration for Nuxt. Run third-party scripts from a web worker.

License

Notifications You must be signed in to change notification settings

jonathanselander/partytown

This branch is 294 commits behind nuxt-modules/partytown:main.

Folders and files

NameName
Last commit message
Last commit date
Aug 17, 2022
Nov 30, 2022
Nov 30, 2022
Feb 28, 2022
Feb 3, 2022
Feb 3, 2022
Feb 3, 2022
Feb 3, 2022
Aug 17, 2022
Feb 3, 2022
Feb 3, 2022
Nov 30, 2022
Feb 3, 2022
Nov 30, 2022
Jan 16, 2023
Jan 16, 2023
Aug 17, 2022
Feb 3, 2022
Nov 10, 2022
Feb 3, 2022
Aug 17, 2022

Repository files navigation

@nuxtjs/partytown

npm version npm downloads Github Actions CI Codecov License

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

About

Partytown integration for Nuxt. Run third-party scripts from a web worker.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 92.6%
  • JavaScript 6.4%
  • Vue 1.0%