Vite

Byline:

Next generation frontend tooling. It’s fast!

Key links

• 🏠 Homepage: https://vitejs.dev/
• 👨‍💻 Repo:

Tutorials

• Learn Vite with Evan You
  • A short video on YouTube that got me into Vite
• A Vite demo | Evan You
• How You Can Speed Up Your Development With Vite 2.0 | Create Fast Vue 3 apps with Vite 2.0 Tutorial
• Vite 2.0 Crash Course | Super Fast Build Tool for JavaScript, React, Vue, Svelte, & Lit (2021)

Templates

• Vite Quickstart
• React Vite Quickstart
• Vue Vite Quickstart
• Community templates

What is Vite?

Vite, pronouned “veet”, is the French for “quick”.

It’s modern JS web development tool that works with plain JS and frameworks like Vue and React.

Features

• Uses ESBuild internally for speed, which is built in Go and handles bundling about 30 times faster than using Node.
• It handles TypeScript code by converting it to plain JS without you having to do an in between step. You still need to do you typechecks separately though.
• Bundles your installed NPM packages.
• Bundles your CSS from imports - these get added to your index.html at build time. No need for installing and using style loader plugins like in Webpack, which would add CSS to your JS and then add them to the page once JS is loaded.

Comparison with Webpack

From article

Vite’s core functionality is similar to using these together:

• Webpack - which does bundling
• Webpack Dev Server - for hot-reloading dev server

But, Vite has some core improvements on developer experience:

• Faster app start time, regardless of app size
• Hot module reloading that is almost instant, regardless of app size
• Compile on-demand
• Zero configuration out of the box for many pre-processors
• Handles Typescript and JSX using ESBuild, for speed

Vite also works as a faster alternative to Vue CLI.

Scaffold new project

See Getting Started in the docs.

These commands do not require vite to be installed.

Run and then choose

• NPM

    $ npx vite@latest
  

• Yarn

    $ yarn create vite
  

You’ll get prompts to name your project, pick a framework, and then pick a a variant like TypeScript.

❯   vanilla
    vue
    react
    preact
    lit
    svelte

Create by name and template

Or pass your choices in one command.

• NPM

    $ # V7+
    $ npx vite@latest my-vue-app -- --template vue
    $ # V6
    $ npx vite@latest my-vue-app --template vue
  

• Yarn

    $ yarn create vite my-vue-app --template vue
  

Here using Vue template for Vite, as per Vite docs and Vue docs.

See MichaelCurrin/vue-vite-quickstart for the result.