Home / Tutorials / Vue / Vite

Vue.js 3 Vite Build Tool Tutorial

In this Vue tutorial we learn about a new frontend build tool called Vite that can be used instead of the Vue CLI.

We cover how to create and initialize new projects with Vite, install project dependencies and how to run the Vite development server.

Lesson Video

If you prefer to learn visually, you can watch this lesson in video format.

Lesson Project

This lesson doesn’t need a pre-generated project. We will scaffold one with Vite throughout the lesson.

What is Vite?

Vite is fontend build tool from Evan You, the creator of Vue.js .

Vite mainly consists of two parts.

  1. A no-bundle server that severs your source files over native ES modules .
  2. A pre-configured Rollup -based production bundler that produces highly optimized builds.

It can be used as an alternative to the Vue CLI (which uses a pre-configured webpack and webpack-dev-server) as well as other build tools like Snowpack .

Vite provides us with a better and faster developement experience because of features like instant server start, super fast HMR ( Hot Module Replacement over native ESM]) and out of the box support for TypeScript.

We can use Vite with vanilla JS or the most popular Javascript frameworks.

  • Vue
  • React
  • Preact
  • Svelte
  • etc.

With the option to choose TypeScript transpiling for each.

How to create a new project with Vite

Vite allows us to scaffold a new project similar to how we do it with the Vue CLI. However, the Vite process is much simpler and doesn’t include all the options we have access to in the Vue CLI.

It’s alright though, we can always manually add the router, vuex, css preprocessors or frameworks, etc.

How to initialize a new project with Vite

To create a new project, we use one of the following commands in the Terminal/Command Prompt in the directory where we want to store our project. Throughout this course, we use C:\VueProjects on a Windows machine.

Command: npm
npm init vite@latest

Or if you’re using Yarn.

Command: yarn
yarn create vite

1. If it’s your first time using Vite, it will ask you to install the create-vite package. Without it, you won’t be able to create a new Vite project so choose y.

Example: Install create-vite
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y)

2. Next, choose a name for your project. If the name has multiple words, use kebab-case.

Example: Name your project
? Project name: » vite-project-name

3. Vite will give us some options of what we want to include in our project.

Example: Vite Vue project options
√ Project name: ... vite-project-name
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
note
  • Pinia is the next version of Vuex and is now recommended for new projects.
  • Vitest is a new Unit Testing library from the creator of Vue and can be used in other frameworks

How to install dependencies for your Vite project

Once the project has been generated, we’ll need to install its dependencies (Vue itself) and dev dependencies (the Vue plugin for Vite).

Start by navigating into the new project folder.

Command: cd
cd vite-project-name

Then run the following command to install the dependencies and dev dependencies.

Command: install
npm install

For any other packages like TailwindCSS or Firebase, please see their individual installation sections.

How to run the development server

Once the installation has finished, we can run the dev server with the following command.

Command: dev server
npm run dev

Keep this server running while working on your projects so that it can hot-reload any changes you make.

tip If you want to quit the server, just press Ctrl + C and select y when asked for confirmation.

When we start the development server, Vite will do its thing and output a message similar to the following.

Output: 
App running at:
- Local: http://localhost:3000/

It’s just the address our dev server is running on..

If we take a look in the browser, we’ll see Vue created a nice landing page for us with some links to useful resources.

note Vite’s Vue project uses the new script setup that was introduced in v3.2.

How to run the development server in Visual Studio Code

If you’re using Visual Studio Code, you can run the server directly from inside the IDE’s built-in terminal.

Option 1:

If you’re inside the project’s directory, use the following command to open it up in Visual Studio Code.

Command: open in vscode
code .

Go to Terminal > New Terminal . This will open the built-in terminal in the bottom pane with the “my-vite-project” directory already selected.

From there, run the development server command.

Command: 
npm run dev

Option 2:

Open Visual Studio Code and go to File > Open Folder . Navigate to your new project, select it and choose Select Folder.

Once the project is open, go to Terminal > New Terminal . This will open the built-in terminal in the bottom pane with the “my-vite-project” directory already selected.

From there, run the development server command.

Command: 
npm run dev

Node will run the appropriate Vite commands to start the server and give us a message similar to the following.

Output: 
App running at:
- Local: http://localhost:3000/

This is the address and port number where the dev server is running. You can Ctrl + Click on either of them and your default browser will open to that address.

If we take a look in the browser, we’ll see Vue created a nice landing page for us with some links to useful resources.

note Vite’s Vue project uses the new script setup that was introduced in v3.2.

The new create-vue scaffolding tool

create-vue is the new scaffolding tool for Vue that’s meant to replace the CLI. create-vue uses Vite behind the scenes and because of that, it can use Vite and RollUp plugins.

To scaffold a new project we run the following command.

Command: Create Vue 3 Project
npm create vue@3

It will ask you to install the create-vue package. Without it, we can’t create a new project so select y.

Example: Install create-vue package
Need to install the following packages:
  create-vue@3
Ok to proceed? (y)

From there it works the same as Vite and asks you to choose various options to add to the project.

Example: Project options
√ Project name: ... vue-project-name
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

Once the installation has finished you’ll need to install the project’s dependencies. To run the dev server, we use the same command as Vite.

Command: Run development server
cd vue-project-name
npm install
npm run dev

Further Reading

For more information on the topics covered in this lesson, please see the relevant sections below.

Previous
Composables (Custom Hooks)
Next
Script Setup