How to Create a Vue 3 Project with Vite

The easiest way to setup a new Vue 3 project with Vite is to use yarn create or npm init.

Using Yarn :

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

Using NPM :

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

The first command initializes the project with all necessary dependencies (vite includes vue 3 out of the box).

When running the dev command, you should see something like this :

$ vite
vite v1.0.0-rc.4
Port 3000 is in use, trying another one...

  Dev server running at:
  > Local:    http://localhost:3000/
  > Network:  http://127.94.0.1:3000/
  > Network:  http://192.168.0.20:3000/

This indicates that everything is installed and running correctly.