Beginner's guide on Vite, fastest dev environment for VueJS

If you are a JavaScript Developer, you must have worked with Grunt, Gulp, Webpack, and other traditional tools to build & bundle the whole application codebase. We have a new similar tool Vite, which can drastically reduce our development time, by refreshing the dev-server as soon as you blink your eye. Interesting? Let us understand it deeply…

What the hack is Vite?

Well, Vite is a french word meaning ‘quickly’ or ‘fast’ and pronounced as ‘Vit’.

“The world is already moving fast, so why not our development” — Evan You.

While working on Vue3, Evan thinks of a solution for a major problem, we had since starting of the web. He decided to make web development, as quickly as possible and started innovating the Vite. This is still experimental, but the community is intended to make it suitable for production.

The Detailed Definition

Vite is a no bundler DEV environment for Vue.js, created by Evan You. Vite serves your code via native ES Module imports during development, allowing you to develop Vue.js single file components without bundling them. Vite also bundles it with Rollup for a production build.

Will it only work with VueJS?

While Vite is primarily designed to work with Vue 3, it can also be used with other frameworks, including React, Preact & other major frameworks.

Key Features:

1. Vite is Lightning fast cold server start by design.
2. Vite offers Instant hot module replacement (HMR).
3. Vite offers True on-demand compilation.
4. Compatible with any native ES Module.
5. Future for next-level web-development.

How Vite Works?

Primarily Vue developers are using Vue CLI (includes Webpack internally) to compile their projects during development and for production.
This comes with a few disadvantages:

1. You have to wait until your entire app to be bundled to start developing. This can make the cold server start very slow, especially for larger projects.
2. Larger projects can also suffer from slow Hot Module Replacement (HMR).

Dev server keeps reloading for every single change or file-save

Vite tackles these issues by compiling code on-demand, only compiling the code imported on the current screen and HMR performance is decoupled from the total number of modules, making HMR consistently fast no matter how big your app is. The resultant page reloads as quickly as you blink your eye.

Let’s Bootstrap a Vite Powered Application

To get started with Vite, you need not to clone any particular boilerplate. Simply open your terminal and navigate to your project directory. From here run the Vite create command:

npx create-vite-app <project-name>

NPX is an NPM package runner that makes it really easy to install any sort of node executable that would have normally been installed using NPM.

Change directory to the project:

cd <project-name>

and install the node modules:

npm install

You can then start the Vite Dev environment by running:

npm run dev

Your new Vite powered Vue 3 application should be running in localhost:3000

What’s Next?

Your dev environment is properly configured with minimal packages.

Default package.json file, with Vue-3 as the only dependency

Now you can start developing your application as you were doing with Vue3. The output will get HMR as soon as you change any code. Hit save and watch your changes instantly appear in the browser.

Speed up your development as fast as you can !!