Vite - lead development without bundles on Vue

Hi, Habrovsk. OTUS launches course in June “Vue.js developer”. In anticipation of the start of the course, we traditionally prepared a translation of interesting material.

Once Ewan Yu (creator of Vue.js) decided not to sleep at night and eventually created Vite.

Vite allows you to create applications on Vue with single-file components without the assembly step of bundles. Imports are requested by the browser as native ES modules. The dev server intercepts requests for .vue files and compiles them on the fly. And it happens instantly.

Please note that Vite is still an experimental solution, and I don’t know what will happen in the future and how long this article will remain useful. Think of it as an aperitif or just as something fun.

let’s try

Create the following files:

Comp.vue

index.html

Then do:

npx vite

Go to http://localhost:3000edit file .vueto see instant changes.

Assembly on production

Now let’s create production-ready attachment.

Create package.json

{
  "scripts": {
    "build": "vite build"
  }
}

Run:

npm i -D vite
npm run build

Check the directory with the code.
Problems I encountered:

Error: Cannot find module ‘tslib’
Solved by running npm i -D tslib
Error: ENOENT: no such file or director
Solved by creating an empty directory manually

Thoughts

It was really easy to start, and development went faster, because I immediately saw the result of the changes. Something like compilation on the fly. So it looks really promising, maybe after a while, we will move on to just such a development method for Vue.

Evan Yu, do your magic.

Fun fact: vue is translated from French as a view, and vite as fast.
It seems that at this point in time, work on Vite has been completed, and possibly will continue after Vue 3. The easiest way to try is Vue 3 beta.

I said that it was completed, relying on tweet Evan Yu however looking at commits in the repository, we can say that the work is still underway.

Learn more about the course.