@teages/nuxt-legacy

A Nuxt module for supporting legacy browsers.

• ✨  Release Notes

Setup

Install the module to your Nuxt application with one command:

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

Then configure it in your nuxt.config.ts:

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

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

maximum compatibility (not recommended)

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

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

Compatibility

Nuxt & @vitejs/plugin-legacy

The module is compatible with Nuxt >=3.15.0 and @vitejs/plugin-legacy ^6.0.0.

Since the module does not depend on any implicit behavior, it should works with any later Nuxt version. But I will recheck compatibility after Nuxt release minor or major versions.

Check the results for current module version:

Nuxt Version	@vitejs/plugin-legacy	Chrome 49	Chrome 61	Chrome 91
3.15.0	6.0.0	✅	✅	✅
3.16.0	6.0.2	✅	✅	✅

Browser support

The module is tested with the following browsers:

• Chrome 49: The minimum required version for Vue 3
• Chrome 61: supports ESM but does not support widely-available features
• Chrome 91: not support Object.hasOwn but can be polyfilled
• latest Chrome

You can test by yourself by visiting the playground with your target browsers.

Content Security Policy

It injects some inline scripts to fix legacy browser compatibility. The hashes keep sync with the latest version of @vitejs/plugin-legacy, the current value is:

• sha256-MS6/3FCg4WjP9gwgaBGwLpRCY6fZBgwmhVCdrPrNf3E=
• sha256-tQjf8gvb2ROOMapIxFvFAYBeUJ0v1HCbOcSmDNXGtDo=
• sha256-VA8O2hAdooB288EpSTrGLl7z3QikbWU9wwoebO/QaYk=
• sha256-+5XkZFazzJo8n0iOP4ti/cLCMUudTf//Mzkb7xNPXIc=

cspHashes is also available in the module:

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

Credits

• IlyaSemenov/nuxt-vite-legacy: module by @IlyaSemenov with his idea

• BrowserStack. This project is tested with BrowserStack.

Contribution

Local development

# 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