Posts Learn Components Snippets Categories Tags About
/

Running NuxtJS with Vite

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

6 months ago

8 mins read

220 views

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.

Load comments for Running NuxtJS with Vite

new

PostSrc Code Snippets

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

Learn New Snippets

Authored by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

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

View Components