Install And Run The Vue JS 3 Project Using Vue CLI [2021]

Javascript Vue.js

In this tutorial, you’re going to learn how to get up and running with the Vue 3 project from scratch with step-by-step instructions.

  1. Install Node.js & NPM package
  2. Install Vue CLI 4.5 or higher
  3. Create A Vue 3 Project
  4. Run Vue 3 Web App

1. Install node.js & npm package

The first step is to install Node.js & NPM (Node Package Manager) to your computer.

You can check to see if they’re already installed by going to the Terminal/Command prompt window in your computer and running a couple of commands.

To check the installed version of node js,

node -v

If you already have it installed, make sure it’s version 10 or above. 

To check the npm, run the following command.

 npm -v

If they’re not installed you’ll get the “command not found” message or something similar when running node and npm version check commands.

In that case, you will need to install them.

So, head over to the Node.js Website in your browser – you can see two versions and I would recommend using LTS which is the more stable version and it also says recommended for most users.

Click the LTS button which then starts downloading the Node.js package file on the computer. 

Double click the package file to install it which will bring up the installer window. You can pretty much install like you would other applications.

As you can see from the introduction tab, I’m not only installing node.js but also npm – so we do not need to install them separately.

Hit Continue, Continue,

Then Agree and install, which will ask for the admin password. Once the password is entered, it’ll take a few seconds to complete the installation process.

The next step is to install Vue CLI.

2. Install Vue CLI

So, What’s Vue CLI?

Vue CLI is an official vue npm package that allows you to create a vue project quickly on your computer.

Let’s install it globally, so that you can create a vue project anywhere on the computer.

Open up the Terminal window and run the following command

npm install -g @vue/cli

It will take a few seconds to complete the installation process.

If it says that you do not have permission, just run the command again by adding sudo in front of it like so, which will ask you to enter your admin password and then you will be all set.

sudo npm install -g @vue/cli

In order to create a vue 3 project, we need a vue cli version of at least 4.5 or above.

If you’ve already installed vue cli, you can check the version using the following command.

vue --version

If you have a version lower than 4.5, you can simply upgrade it by running the command below.

npm upgrade --next

The next step is to create a vue 3 project.

3. Create A Vue 3 Project.

To do that, open up the terminal and go to the desktop by typing:

cd ~/Desktop

Then, type: 

vue create my-project-name

You will then be asked a question – which version of vue you want to use and you can pick vue 3 by moving the arrow key up and down on the keyboard and hit enter to make a selection.

This will start creating our vue 3 project with the project name as a folder name.

It will take a few seconds to create the vue 3 project and install its default dependencies.

Once it’s done, you can see the folder with the project name on your desktop.

The last step is to run the vue 3 project on the browser.

4. Run The Project

As you can see, my terminal window gives me two commands to run the project.

The first command is to go into the project folder:

CD my-project-name

To run the app, run the following command.

npm run dev

To be organized, I’m going to run the project from my Visual Studio Code editor instead of using the Terminal window.

Go to the Applications folder → Visual Studio Code

Then, FileOpen → Then navigate to the project folder that we created on the desktop and hit open.

As you know, the Terminal window is integrated with Visual Studio, so I can simply open it by choosing the Terminal option from the menu bar at the top and then New Terminal which will open up a new window at the bottom of the editor.

As you can see, the terminal is already into the project so I do not have to use the first command which is

CD my-project-name

All I have to do is run the npm run serve command.

Which will start running the server on my computer and give me the localhost URL.

As you can see, I get two: one is localhost and the other one is the Network URL which is great when you want to see the project on multiple devices such as checking the project UI on your mobile phone.

Open up the browser and copy the Network URL and paste it there.

At this state, we are successfully up and running with our Vue 3 app. 🙂

Next → Ref vs Reactive Differences In #Vuejs 3 Composition API