DEV Community

Cover image for Vite⚡ - Vue no-bundler dev setup
Gaute Meek Olsen
Gaute Meek Olsen

Posted on • Updated on • Originally published at gaute.dev

Vite⚡ - Vue no-bundler dev setup

Apparently Evan You (creator of Vue.js) wasn't interested in sleeping one night and created Vite.

Vite allows you to develop your Vue application with Single-File Components without any bundle step. Imports are requested by the browser as native ES module imports. The dev server intercepts requests to .vue files and compiles them on the fly. And it's instantly fast.

Note that Vite is Experimental ⚠️ I don't know what the future for Vite is or how long this article is valid. But consider this a future snack and something fun.

Let's try it out

Create the following files

Comp.vue

<template>
  <button @click="count++">{{ count }}</button> 
</template>

<script>
export default {
  data: () => ({ count: 0 })
}
</script>

<style scoped>
button{
  font-size: 2rem;
}
</style>
Enter fullscreen mode Exit fullscreen mode

index.html

<div id="app"></div>
<script type="module">
  import { createApp } from 'vue'
  import Comp from './Comp.vue'

  createApp(Comp).mount('#app')
</script>
Enter fullscreen mode Exit fullscreen mode

Then run:

npx vite
Enter fullscreen mode Exit fullscreen mode

Go to http://localhost:3000, edit the .vue file to see changes hot-reloaded.

Bundle for Production

Now let's build our production-ready app.

Create package.json

{
  "scripts": {
    "build": "vite build"
  }
}
Enter fullscreen mode Exit fullscreen mode

Run

npm i -D vite
npm run build
Enter fullscreen mode Exit fullscreen mode

Check out the dist folder for your code.

Issues I stumbled upon.

  • Error: Cannot find module 'tslib'
    • Fix: npm i -D tslib
  • Error: ENOENT: no such file or director
    • Fix: create an empty dist folder manually

Thoughts

It was really easy to get started and the development process is really fast as I can see my changes instantly. It's like a compile on the fly setup. So this looks really promising, maybe in some time, this will be the way we develop all Vue projects.

Evan You, keep doing your magic 🧙

Fun fact: As vue = view in french, vite = fast in french.

Edit: Looks like Vite is concluded for now and will/might be picked up after Vue 3 has launched. But if you want to try Vue 3 beta today, this is the easiest way.

Edit2: I said it was concluded based on a tweet from Evan You. Looking at the commits to the repo I guess it's still being worked on 😃.

Top comments (4)

Collapse
 
imanaspaul profile image
Manas Paul

Wooo I'm gonna try that out now.

Collapse
 
gautemeekolsen profile image
Gaute Meek Olsen

Cool :) Btw, now you also can create a Vite project with npx create-vite-app <project-name>

Collapse
 
cgrs profile image
carlos g.

even shorter with npm init vite-app <project-name>

Collapse
 
alvarosabu profile image
Alvaro Saburido • Edited

Apparently Evan You (creator of Vue.js) wasn't interested in sleeping one night and created Vite.

LOL hahha