Running NuxtJS with Vite

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: [
    'nuxt-vite'
  ]
}

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: [
    'nuxt-vite'
  ],

  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.