How to create a Vue 3 project with Vue CLI tools

Vue can be used as a library injected with a <script> tag and that's it. But you can also create a project already set up. The most popular option is to use the Vue CLI tools, which allow you to generate the project files and add plugins like the Vue router.

Prerequisites

• NPM installed (see: How to install Node.js and NPM on Windows, Mac, or Linux)

Installing the Vue CLI tools

To create and handle Vue projects easier, we're first going to install the Vue CLI tools using NPM. To do that, make sure you have npm installed and then run the following command in your terminal:

npm install -g @vue/cli

This will install the Vue CLI tools from NPM and you're going to be able to access them from your terminal in any folder (that what's "globally" means, since we included the -g tag)

Creating the Vue.js 3 project

Now using the Vue CLI tools we are going to create a Vue.js 3 project by running this in the terminal:

vue create my-vue-project

In this case, I named my Vue project my-vue-project but you can name it whatever you want and that's the name the folder is going to get.

Now just "cd" into your newly created folder and run the command to run your Vue application.

cd my-vue-projectnpm run serve

Now if you access http://localhost:8080 by default, you should see the Vue 3 application landing page running correctly!