Narwhals Prolong Mischief

    @nuxtjs/partytown
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    @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

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

    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

    Keywords

    none

    Install

    npm i @nuxtjs/partytown

    DownloadsWeekly Downloads

    508

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    11.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • danielroe