🧪 Vite mode is experimental and many nuxt modules are still incompatible
If found a bug, please report via issues with a minimal reproduction
- Using vite in development
- Basic server-side rendering
- Basic Hot-Module-Replacement
- Nuxt plugins
- Nuxt components
- Vuex store
- Page middleware
- Composition API
- Content module
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
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
MIT - Nuxt Team