@nuxtjs/partytown

Partytown の Nuxt 統合

機能

👌 設定不要
🔥 リソース消費の激しいスクリプトをWebワーカーに移動
⚡️ サイトの速度を向上
💯 Nuxt 3とNuxt Bridgeをサポート

クイックセットアップ

@nuxtjs/partytown をインストール！

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

nuxt.config.ts の modules セクションに追加します

export default defineNuxtConfig({
  modules: ['@nuxtjs/partytown'],
})

partytownで処理したいスクリプトに type: 'text/partytown' 属性を追加します。

<template>
  <div>
    <Script type="text/partytown" src="https://example.com/analytics.js" />
  </div>
</template>

設定

Partytownは多くのオプションをサポートしており、nuxt.config.ts ファイルで渡すことができます

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

設定例

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タグマネージャー

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://127.0.0.1/js/script.js',
          defer: true,
          type: 'text/partytown',
          'data-domain': 'your-domains',
        },
      ],
    },
  },
})

開発

型スタブを生成するには、yarn prepare を実行します。
開発モードでプレイグラウンドを起動するには、yarn dev を使用します。

ライセンス

MITライセンス