Part 2: Create a Vue 3 project
Tags: vue, javascript, github, bulma
Published: 2022-02-02 10:49:03

---
series: "Lightning fast build VueJS 3 project and deploy it free of charge to GitHub pages"
---

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


<a name="chapter-1"></a>
### 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](https://cli.vuejs.org/guide/installation.html):

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

<a name="chapter-2"></a>
### 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](https://cli.vuejs.org/guide/installation.html).

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

<a name="chapter-3"></a>
### 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](https://v3.vuejs.org/) project by executing following command in your terminal:

```
vue create .
```

<a name="chapter-4"></a>
### Step 4: Selected features in @vue-cli

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

![vue-cli generate project in current dir](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2k0i66sharnaa04u4s6.png)

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

![vue-cli default Vue 3 project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syzb47j88qpsjtr0oxuy.png)

<a name="chapter-5"></a>
### 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 . 
```

<a name="chapter-6"></a>
### Step: 6: Run the project

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

```
npm run serve
```
Project is up and running:

![project up and running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hvlcbknt8f7xe9yp4h7.png)

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.

<a name="chapter-7"></a>
### Step: 7: Git stage all changes

Stage all changes:


![vs-code-stage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpz0u948lyio17bwby6h.png)

<a name="chapter-8"></a>
### Step: 8: Git commit all changes

Commit all changes:

![vs-code-commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9vifd727659vl8svrc9.png)

<a name="chapter-9"></a>
### Step: 9: Push changes to the remote GitHub repository

Push to the remote:

```
git push
```

<a name="chapter-10"></a>
### Summary

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