Getting started with Vite, a no bundler DEV environment for Vue.js

Introduction

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 a bundle step. While Vite is primarily designed to work with Vue 3, it can also be used with other frameworks, including React. Vite by design is Lightning fast cold server start and offers Instant hot module replacement and True on-demand compilation.

What does Vite mean?

Vite, is a french word meaning ‘Fast’, and pronounced ‘Vit’.

Why use Vite?

Primarily Vue developers will be using Vue CLI to compile their projects during development and for production, this comes with some disadvantages: You have to wait until your entire app to be bundled to start developing, this can make cold server start very slow, particularly for larger projects. Larger projects can also suffer from slow Hot Module Replacement (HMR). 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.

Getting started

To get started with Vite open your terminal and navigate to your chosen directory. From here run the Vite create command:

npx create-vite-app <project-name>

Change directory to project:

cd <project-name>

and install node modules:

npm install

You can then start the Vite Dev environment by running:

npm run dev

Vite should now be running in localhost.

Testing Hot Module Replacement

Now you have Vite up and running you can test Vite’s Hot Module Replacement (HMR). In your chosen Editor, open your Vite project and from the components folder open the HelloWorld.vue file. Your template code should look something like this:

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <button @click="count++">count is: {{ count }}</button>
        <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
    </div>
</template>

I suggest opening your Vite site in the browser, next to your editor, then edit your H1 and prefix it with Hello Vite: like so:

<template>
    <div class="hello">
        <h1>Hello Vite: {{ msg }}</h1>
        <button @click="count++">count is: {{ count }}</button>
        <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
    </div>
</template>

Hit save and watch your changes instantly appear in the browser.

Conclusion

We’ve looked at the very basics of getting Vite up and running — At this stage Vite is still experimental, but the goal is for Vite to become suitable for production. It’s still early days yet but I look forward to the possibility of replacing bundlers with Vite in the future.

If you’ve found this article useful, please give it a clap and follow me on Medium, Dev.to and/ or Twitter.