Home / Tutorials / Running NuxtJS with Vite
Running NuxtJS with Vite cover

Running NuxtJS with Vite

8 mins


3 years ago



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.
notion avatar

Ahmad Aziz

Week-end developer currently experimenting with web, mobile, and all things programming.

Support Us

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

Related Tutorials

Code Snippets

Collection of Laravel, AlpineJS, VueJS, Tailwind CSS, Flutter snippets and more. New snippets added every day.
View Snippets

Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your web projects
View Components

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this