Create a Vue.js 3 project either with the Vue CLI or with Vite

Getting Started

In this tutorial, we’ll be covering two options to set up your Vue 3 project:

• Vue CLI
• Vite

For more information, take a look at the Vue.js 3 documentation.

Vue CLI

If you have worked with Vue before, you’ve likely used the Vue CLI to set up your Vue project.

Vue CLI is a command line interface for Vue development that can be used, for instance to create a Vue app.

First, we have to make sure that we have the most up-to-date version of the Vue CLI and we can do that by running the following command in our terminal:

npm update -g @vue/cli

OR

npm i -g @vue/cli

The next command to create our project is:

 vue create <PROJECT-NAME>

If the update to the latest Vue CLI was successful, you should see something like the following output, where you have an option to choose Vue 3. Choose Vue 3 with the up and down keys, then hit enter:

? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features 

Now our app should build. When it’s finished, you just have to go inside our project directory and then run the Vue app! The commands for that are:

cd <PROJECT-NAME>
npm run serve

Now navigate to http://localhost:8080/ to see your new Vue 3 app! That is how easy it is to set up a Vue 3 project with the Vue CLI, now let’s continue with Vite.

Vite

You now may be asking yourself: “What is the difference between the Vue CLI and Vite and which one should I choose?”

Well, the Vue CLI is built on top of webpack, it is a module bundler that will bundle your entire Vue project on startup, hot reloads, and compilation.

Vue Vite instead offers faster startup, hot reload, and compilation speeds than bundler-based solutions during development.

Vite eliminates this bundling process and only compiles code on-demand – this means that only code currently impacting the current screen is compiled. Therefore, you don’t have to wait for your entire project to be bundled to start developing.

Since we are only building a small app – or if you are working on a small project – it does not really make a difference. Only when working with large projects it can take a longer time if you are using the CLI instead of Vite.

Now let’s create a project using Vite.

To do this, run the following command (make sure to run it outside your other Vue app created with the Vue CLI):

npm init vite-app <project-name>

Afterwards, we just have to go into our project folder, install the dependencies, and then run our Vue app with the following commands (or the respective yarn commands):

cd <project-name>
npm install
npm run dev

Now, if you navigate to http://localhost:3000  you should see the a slightly different Vue app, this time created using Vite.