@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!

   yarn add @nuxtjs/partytown # or npm install @nuxtjs/partytown

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

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

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
  },
})

Development

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

Licence

MIT Licence