⚡ Vite Experience with Nuxt 2 🧪

🧪 Vite mode is experimental and many nuxt modules are still incompatible

If found a bug, please report via issues with a minimal reproduction

What is working?

• Using vite in development
• Basic server-side rendering
• Basic Hot-Module-Replacement
• Nuxt plugins
• Nuxt components
• Vuex store
• Page middleware
• Composition API
• Content module

Usage

Install package:

yarn add --dev nuxt-vite
# OR
npm i -D nuxt-vite

Add to buildModules:

// nuxt.config
export default {
  buildModules: [
    'nuxt-vite'
  ]
}

Note: Nuxt >= 2.15.0 is required

How it works

Nuxt uses has a powerful hooking system to extend internals and abstracted bundler (@nuxt/webpack) which can be replaced. Vite module, replaces webpack by a similar interface to use vite instead of webpack. Client-side modules are loaded on demand using vite middleware.

Server-side bundle is being created by another vite instance and written to filesystem and passed using hooks to nuxt server-renderer. Current approach is not most efficient due to usage of filesystem, extra build and lack of lazy loading. Yet much faster than webpack builds. You can opt-out SSR build using nuxt dev --spa

This module could not be possible without vite-plugin-vue2 by @underfin

License

MIT - Nuxt Team