Part 2: Create a Vue 3 project

Table of contents

• Step 1: Uninstall old version of vue-cli
• Step 2: Install new version of @vue/cli
• Step 3: Launch @vue/cli
• Step 4: Select features in @vue-cli
• Step 5: Open a project with code editor
• Step 6: Run the project
• Step 7: Git stage all changes
• Step 8: Git commit all changes
• Step 9: Push changes to the remote GitHub repository
• Summary

Step: 1: Uninstall old version of vue-cli

Open a terminal on your computer.
If you have new version of @vue/cli installed on your computer, then skip Step 1 and Step 2. Move to the Step 3.
If you have old version of vue-cli installed, then you need to uninstall it first by executing following command as per instructions there:

npm uninstall vue-cli -g
#or
yarn global remove vue-cli.

Step 2: Install new version of @vue/cli

If you have @vue/cli installed on your computer, then skip following line of code and move to the Step 3.
If you don't have installed @vue/cli, then execute following code in your terminal as per instructions there.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Step 3: Launch @vue-cli

In your terminal navigate to the folder you have git clone'ed from the remote GitHub repository. In my case I type:

cd Documents/code/list-with-products

Create new Vue 3 project by executing following command in your terminal:

vue create .

Step 4: Selected features in @vue-cli

You will be asked if project should be generate in the current directory? Type Y:

Navigate with arrow keys and select Default (Vue 3) by hitting enter:

Step 5: Open a project with code editor

Your new Vue 3 project is set up and ready to be maintained on your computer.
Open a project with your preferred code editor. In my case it is Visual Studio Code.
To open a project with Visual Studio code execute following commands in terminal:

code . 

Step: 6: Run the project

In your code editor open a terminal and run following command:

npm run serve

Project is up and running:

Please note, that your URL address might be different. That doesn't matter. Paste this URL address to your browser and enjoy with your new Vue project.

Step: 7: Git stage all changes

Stage all changes:

Step: 8: Git commit all changes

Commit all changes:

Step: 9: Push changes to the remote GitHub repository

Push to the remote:

git push

Summary

Congrats! Your new Vue 3 project were created on your computer and pushed to the remote GitHub repository.

Comments

[Wayne Smallman]

Hi! I have question regarding using Vue 2 and 3 on a per project basis.

I see that vue-cli is at: /usr/local/lib/node_modules/

Is it possible for me to move vue-cli into a project folder where I'm using Vue 2, and then install Vue 3 on a per project basis, without the global flag?