nuxt-vite-legacy

Nuxt module to make your Nuxt3 app compatible with legacy browsers.

Uses @vitejs/plugin-legacy and applies a number of hacks that Nuxt.js team decided to avoid.

Tested on Nuxt 3.4 to 3.8, and also on Nuxt 3.13.

Quick Setup

Install:

1npm install nuxt-vite-legacy --save-dev

Add nuxt-vite-legacy to the modules section of nuxt.config.ts:

1export default defineNuxtConfig({
2  modules: ["nuxt-vite-legacy"],
3  // Optionally, provide @vitejs/plugin-legacy options.
4  // For example, for Chrome 49 you could use:
5  legacy: {
6    targets: ["chrome 49"],
7    additionalLegacyPolyfills: [
8      "mdn-polyfills/Element.prototype.getAttributeNames",
9    ],
10  },
11})

Caveats

The legacy build will be used for browsers that don't support <script module> which is enough most of the time.

However, this leaves incompatibility window for legacy browsers that do support modules but don't support modern features such as async generators (based on caniuse that would be e.g. Chrome 61-62). Vanilla @vitejs/plugin-legacy injects special detection scripts into SSR HTML, which this Nuxt module doesn't. PR's welcome!

Upgrading

Nuxt and @vitejs/plugin-legacy are upgraded separately and the whole matrix is not well tested. The module may behave incorrectly with older Nuxt and newer @vitejs/plugin-legacy or vice versa.

Please report if you encounter issues; better yet, a PR adding the Github action testing matrix would be much appreciated.

Development and Testing

Install Node 20, then:

1corepack enable
2pnpm i
3pnpm dev:prepare
4pnpm dev:build && pnpm dev:start

http://localhost:3000 will run a Chrome 49-compatible version.