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 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 an additional package. Without it, you won’t be able to create a new Vite project so choose y.

Example:
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:
? Project name: » my-vite-project

3. Next, choose Vue as the framework.

Example:
? Select a framework: » - Use arrow-keys. Return to submit.
	vanilla
>   vue
	react
	preact
	lit
	svelte

4. And select vue for the Javascript variant.

Example:
? Select a variant: » - Use arrow-keys. Return to submit.
>   vue
	vue-ts

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 my-vite-project

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

Command: install
npm install

For any dependencies like Vuex or the Router, 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. By default, it will be localhost:3000 .

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.

Further Reading

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