@teages/nuxt-legacy

レガシーブラウザをサポートするためのNuxtモジュール。

• ✨  リリースノート

セットアップ

1つのコマンドでモジュールをNuxtアプリケーションにインストールします

# vite
pnpm add @teages/nuxt-legacy @vitejs/plugin-legacy

次に、nuxt.config.tsで設定します

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@teages/nuxt-legacy'
  ],

  legacy: {
    vite: {}, // `@vitejs/plugin-legacy` options
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@teages/nuxt-legacy'
  ],

  legacy: {
    vite: {
      targets: ['fully supports proxy'],
      modernPolyfills: true,
    },
  },
})

互換性

Nuxt & @vitejs/plugin-legacy

このモジュールは、Nuxt ^3.18.0 || >=4.0.3 および @vitejs/plugin-legacy ^7.0.0 と互換性があります。

このモジュールは暗黙的な動作に依存しないため、それ以降のNuxtバージョンでも動作するはずです。ただし、Nuxtのマイナーバージョンまたはメジャーバージョンのリリース後には互換性を再確認します。

現在のモジュールバージョンの結果を確認する

ブラウザのサポート

このモジュールは以下のブラウザでテストされています

• Chrome 49: Vue 3の最小要件バージョン
• Chrome 61: ESMをサポートしていますが、広く利用可能な機能はサポートしていません
• Chrome 91: Object.hasOwnをサポートしていませんが、ポリフィル可能です
• 最新のChrome

ターゲットブラウザでプレイグラウンドにアクセスして、ご自身でテストできます。

コンテンツセキュリティポリシー

これは、レガシーブラウザの互換性を修正するために、いくつかのインラインスクリプトを挿入します。ハッシュは@vitejs/plugin-legacyの最新バージョンと同期しており、現在の値は次のとおりです。

• sha256-MS6/3FCg4WjP9gwgaBGwLpRCY6fZBgwmhVCdrPrNf3E=
• sha256-tQjf8gvb2ROOMapIxFvFAYBeUJ0v1HCbOcSmDNXGtDo=
• sha256-ZxAi3a7m9Mzbc+Z1LGuCCK5Xee6reDkEPRas66H9KSo=
• sha256-+5XkZFazzJo8n0iOP4ti/cLCMUudTf//Mzkb7xNPXIc=

cspHashesもモジュールで利用可能です

import { cspHashes } from '@teages/nuxt-legacy'

クレジット

• IlyaSemenov/nuxt-vite-legacy: @IlyaSemenovによる彼のアイデアを基にしたモジュール
• BrowserStack。このプロジェクトはBrowserStackでテストされています。

貢献

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release