Getting started with Vite and Vue

Vite means fast in french, and it is! That's for sure one of the biggest benefits that you will notice while using it but not only. I was used to starting new projects with Vue CLI but I have found out that has been put in "maintenance mode" (whatever it means). Along with that, Vuetify, a components library for Vue that was recently released with Vue 3 support, uses Vite by default to generate projects.

This was enough for me to trigger my interest in Vite. In this post, I will show you how to start a new project from scratch with Vite.

Create a Vanilla Javascript project

Open the terminal and execute the following commands:

npm create vite@latest vite-app -- --template vue
cd vite-app/
npm install
npm run dev

The project is now set up and served on localhost:5173. The most attentive of you will have noticed the presence of the vite.config.js file, which contains the plugins configuration for your project:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

In this case, only the Vue plugin is used.

As usual to create the app for production:

npm run build

Have you noticed that serving and building are way faster compared to Vue CLI?

Create a Typescript project

In case you want to use Typescript with Vue and Vite start the project as follows:

npm init vite@latest my-vue-app -- --template vue-ts

Conclusions

Vite was developed by the creator of Vue: Evan You. That said, it supports all major front-end Javascript frameworks like React and many plugins that are framework-agnostic (here's a quite long list).

I am migrating all my projects from Vue CLI to Vite. Do you plan to do that as well? Also, what will happen to Vue CLI? Will it be completely abandoned and phased out?