Posts Learn Components Snippets Categories Tags Tools About

Running NuxtJS with Vite

Learn how to get NuxtJS application up and running with Vite in few simple steps.

2 years ago

8 mins read


In this post, you'll be learning how to add Vite "The Next Generation Frontend Tooling" for a NuxtJS application. We'll be using the Vite plugin/module that's specially tailored for NuxtJS and it's suitable for both new and existing application. 

Install Vite

Do note that In order to use this module, the NuxtJs version has to be >= 2.15.0.

npm i -D nuxt-vite
If you are using yarn then run the code below.
yarn add --dev nuxt-vite

Update nuxt.config.js

Once it's installed, update the config buildModules property and add "nuxt-vite".
const config = {
  /* other configs omitted */
  buildModules: [

export default config
Do note that you can also pass Vite configurations and plugins into the Vite entry of nuxt configuration and it's as follow.
const config = {
  /* other configs omitted */
  buildModules: [

  vite: {
    /* options for vite */
    vue: {
      /* options for vite-plugin-vue2 */

export default config
For module authors, to start experimenting with Nuxt Vite and for more details can be found on the advance section of NuxtJs Vite documentation.

Run the Project

Now you can run "yarn dev" and now NuxtJs will be running with Vite. Many of the core functionalities are already supported so by right it will run smoothly unless if there are many modules used within the application and those modules have not been migrated.

Common Issues?

Do check out their main Github repository (NuxtJs Vite repository) as it's frequently being developed and you can also refer to this page for more details.

Thank you for reading this article and if you find it interesting do share it with others. Have fun experimenting and happy coding.

Alternative Tags

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for Running NuxtJS with Vite


PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets

Sponsors 👑

+ Add Yours

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components