Vite

Vite (like "veet") is a build tool designed to provide a faster and leaner development experience for modern web project. Framework independent, vite will work with an array of JavaScript Frameworks include Vue, React, and Svelte as well as vanilla JavaScript projects.

Why Use a Build Tool

Build tools offer improved development experience over using Vue over a CDN. Build tools offer a complete local development, will handle bundling of files for improved local and production performance, provides best practice project structure, and enables use of advanced Vue development features like Single File Components.

Creating a Vue project

Vite can scaffold a new Vue project by using the following command:

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

NOTE

If it is the first using init vite, you may be asked to install create-vite@latest. When prompted, enter y.

Once vite has finished the scaffold, navigate to the project, install the dependencies, and start the development server.

cd my-vue-app
npm install
npm run dev