nuxt-vite

0.3.5 verified Mon Apr 27 auth: no javascript

Nuxt-vite brings Vite's fast development experience to Nuxt 2 (nuxt >= 2.15.0 required). At version 0.3.5, it is an experimental module that replaces webpack with Vite for Nuxt 2 projects, offering significantly faster hot module replacement and dev startup. It ships TypeScript types and relies on vite-plugin-vue2. Many Nuxt modules may be incompatible; it is actively maintained by the Nuxt team on GitHub.

Common errors

error Cannot find module 'nuxt-vite' ↓

cause nuxt-vite not installed or not added as devDependency.

fix

npm install -D nuxt-vite or yarn add --dev nuxt-vite

error TypeError: Cannot read property 'extendRoutes' of undefined ↓

cause Incompatible Nuxt version (<2.15.0) causing missing API.

fix

npm install nuxt@latest (>=2.15.0)

error Module './vite-plugin-vue2' not found ↓

cause Missing vite-plugin-vue2 dependency.

fix

npm install -D vite-plugin-vue2

error Error: Vite mode is experimental and many Nuxt modules are still incompatible ↓

cause Using a module that does not support Vite.

fix

Check https://vite.nuxtjs.org/advanced/modules for compatibility or disable the module.

Warnings

breaking Experimental module; many Nuxt modules are incompatible and may break. ↓

fix Check module compatibility on https://vite.nuxtjs.org/advanced/modules.

deprecated nuxt-vite is deprecated in favor of Nuxt 3's built-in Vite support. ↓

fix Migrate to Nuxt 3 for native Vite integration.

gotcha Requires Nuxt >= 2.15.0; older versions will fail to load. ↓

fix Upgrade Nuxt to at least 2.15.0.

gotcha Vite configuration conflicts: custom webpack loaders may not work. ↓

fix Replace webpack-specific configuration with Vite equivalents.

gotcha HMR may be unstable with some Vue 2 plugins. ↓

fix Disable HMR for problematic plugins or report issues.

Install

npm install nuxt-vite

yarn add nuxt-vite

pnpm add nuxt-vite

Imports

default export (nuxt.config)

wrong

module.exports = { buildModules: ['nuxt-vite'] }

correct

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

Nuxt config uses ES module exports by default.

defineNuxtConfig (if using Nuxt Bridge)

wrong

const { defineNuxtConfig } = require('nuxt')

correct

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({ buildModules: ['nuxt-vite'] })

defineNuxtConfig is available only when using Nuxt Bridge or Nuxt 3, not Nuxt 2 alone.

require('nuxt-vite') in legacy CJS config
wrong
```
const nuxtVite = require('nuxt-vite')
```
correct
```
// Not recommended; use buildModules array with string 'nuxt-vite'
```
Nuxt 2 configs should use the string identifier in buildModules, not require the module directly.

Quickstart

Shows minimal configuration to enable Vite in a Nuxt 2 project by adding nuxt-vite to buildModules.

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

// Then run: npm run dev