Giter Club home page Giter Club logo

nuxt-vite-legacy's Introduction

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.

Quick Setup

Install:

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

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

export default defineNuxtConfig({
  modules: ["nuxt-vite-legacy"],
  // Optionally, provide @vitejs/plugin-legacy options.
  // For example, for Chrome 49 you could use:
  legacy: {
    targets: ["chrome 49"],
    additionalLegacyPolyfills: [
      "mdn-polyfills/Element.prototype.getAttributeNames",
    ],
  },
})

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!

Development and Testing

npm i -g pnpm
pnpm i
pnpm dev:prepare
pnpm dev:build && pnpm dev:start

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

nuxt-vite-legacy's People

Contributors

github-actions[bot] avatar ilyasemenov avatar kingyue737 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

nuxt-vite-legacy's Issues

nuxt-vite-legacy returns unexpectedly

The console displays:

 WARN  nuxt-vite-legacy didn't find legacy-polyfills-legacy chunk. Legacy build will not work. 

But I only use vite-plugin-legacy to generate modern polyfills in my project with renderLegacyChunks: false in config. The plugin should still mutate the reference in the manifest instead of aborting.

Support for Nuxt generate?

Does your module works with static generation websites?

Because we just try it with a demo of ours and the generated html in public folder didn't change at all.

Than you

Issue with Loading JavaScript in Nuxt 3 App on Chromium 49

Hi there,

I've been trying to use your plugin for my personal project, as it is necessary for my Nuxt 3 app to work under Chrome 49. I downloaded Chromium version 49 (Version 49.0.2623.23 (64-bit)) for this purpose. I attempted to launch the playground in the repository using this version, but the JavaScript files are not loading. This issue occurs both in dev mode and build mode. Any insights into what might be causing this problem?

Thanks!

Chromium 49:
image

Current Chrome:
image

Not working on static website

Hi there,

I've been trying to use your plugin for project created by vitesse-nuxt3. I generated the static web site and hosted it with http-server. It doesn't work on chrome 60 while it's ok above chrome66. Any insights into what might be causing this problem? Below is my nuxt.config:

modules: [
    '@vueuse/nuxt',
    '@unocss/nuxt',
    '@pinia/nuxt',
    '@nuxtjs/color-mode',
    'nuxt-module-eslint-config',
    'nuxt-vite-legacy'
  ],
  legacy: {
    targets: ["chrome 49"],
    additionalLegacyPolyfills: [
      "mdn-polyfills/Element.prototype.getAttributeNames",
    ],
    modernPolyfills: [
      'es.global-this',
      'es/object',
      'es/array',
      'es.symbol',
      'es.array.filter',
      'es.promise',
      'es.promise.finally',
      'es/map',
      'es/set',
      'es.array.from',
      'es.array.for-each',
      'es.object.define-properties',
      'es.object.define-property',
      'es.object.get-own-property-descriptor',
      'es.object.get-own-property-descriptors',
      'es.object.keys',
      'es.object.to-string',
      'web.dom-collections.for-each',
      'esnext.global-this',
      'esnext.string.match-all',
      'es.object.define-setter',
      'es.array.iterator',
      'es.object.assign',
      'es.array.includes'
    ],
  },

Thanks!

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.