Gaute Meek Olsen

Posted on Apr 25, 2020 • Updated on Jan 1, 2023 • Originally published at gaute.dev

Vite⚡ - Vue no-bundler dev setup

#news #vue #webdev

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

Evan You

@youyuxi

As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with support for Vue SFCs **with hot reload**. Now it's almost 6AM and I have PoC working. The hot reload is so fast it's near instant.

09:54 AM - 20 Apr 2020

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>

index.html

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

  createApp(Comp).mount('#app')
</script>

Then run:

npx vite

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"
  }
}

Run

npm i -D vite
npm run build

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 😃.