Part 3: Edit project to meet requirements
Tags: vue, javascript, bulma, tutorial
Published: 2022-02-10 08:07:04

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

## Table Of Contents
* [What is done so far?](#chapter-1)
* [What I am going to build now?](#chapter-2)
* [Install required packages](#chapter-3)
* [Register installed packages](#chapter-4)
* [Create `Router` at `/src/router/index.js`](#chapter-5)
* [Create `vuex` at `/src/store/index.js`](#chapter-6)
* [Create file `/src/views/Products.vue/`](#chapter-7)
* [Create file `/src/views/BillPage.vue/`](#chapter-8)
* [Replace code in `/src/App.vue/`](#chapter-9)
* [Replace code in `/src/main.js/`](#chapter-10)
* [Create new component at `src/components/NavBar.vue`](#chapter-11)
* [Stage and commit changes](#chapter-12)
* [Git push code to the remote GitHub repository](#chapter-13)
* [Summary](#chapter-14)

<a name="chapter-1"></a>
### What is done so far?

Hence, so far I have done:
- created a new project on GitHub.

- cloned remote GitHub repository to the local computer.

- created template `Vue 3` project.

- pushed template `Vue 3` code from local computer to the remote repository on GitHub.


But this project does nothing. It is just standard template generated by `@vue/cli`.

<a name="chapter-2"></a>
### What I am going to build now?

Now I am going to create a demo website with a list of products.

To recap from `Step 0` following conditions should be met:
- Loaded page should have several demo `products` stored.
- It should be available to `add`, `edit` and `delete` a product.
- Backend or database shouldn't be used, but products should be `stored` for each particular user who uses demo website.
- Product `code`, `name` and `price` should be available to `add` manually by the user.
- When a `price` of the product is added by the user, then `subtotal price` should be displayed immediately with a `VAT` of 21% added.
- Values should be reactive.
- Input fields should have validation rules, so that invalid values wouldn't be accepted.
- Demo website should have only `2 pages`. Main (index) page to `display`, `add`, `delete` and `edit` products and billing page to `display` a `list` of products and `subtotal price` of all the products.

So, let's get started on the action!

<a name="chapter-3"></a>
### Install required packages

As you probably noticed earlier I have installed default `Vue 3` project. It means, that `vue-router` and `vue-store` wasn't installed by default. I have done this intentionally, so that I have to install and register them manually. When things are done by default it is not always clear what is going on and how it works behind the scenes. By installing/adding sofware manually it is always possible to learn and better understand principles of these software.
Hence let's install and register following packages required for this project:

1. `vue-router`
2. `vue-store`
3. [`vee-validate`](https://www.npmjs.com/package/vee-validate) form validation library for Vue.js
4. [`Yup`](https://www.npmjs.com/package/yup) data validation library which will be used on top of `vee-validate`
5. [`Bulma CSS`](https://bulma.io)

```
npm i vue-router@next
```

```
npm i vuex@next
```

```
npm install bulma
```

```
npm install vee-validate@next
```

```
npm i yup
```

After the instalation `package.json` file was added with above mentioned packages:


![npm i packages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyda026gyypw17ip7vu5.png)

<a name="chapter-4"></a>
### Register installed packages

When packages are installed they should be registered to be available to use in the application.
Replace default code in the `src/main.js` file with the following code:
 
{% gist https://gist.github.com/mindaugas-pro/8508cf3dde8b7126dfa8ff1f79c12df4 %}

<a name="chapter-5"></a>
### Create `Router` at `/src/router/index.js`

Create a new folder and new file at `src/router/index.js` and paste following code:

{% gist https://gist.github.com/mindaugas-pro/361da0941d997b8275d64fdc9cbb7b9f %}

<a name="chapter-6"></a>
### Create `vuex` at `/src/store/index.js`

Create a new folder and new file at `src/store/index.js` and paste following code:

{% gist https://gist.github.com/mindaugas-pro/43baf1f4052778f627c097a85d5c63c1 %}

<a name="chapter-7"></a>
### Create file `/src/views/Products.vue/`:

{% gist https://gist.github.com/mindaugas-pro/2c7fe3930f18af525005300f2ddede3b %}

<a name="chapter-8"></a>
### Create file `/src/views/BillPage.vue`:

{% gist https://gist.github.com/mindaugas-pro/57271edd28748802646d04f3d0ea2257 %}

<a name="chapter-9"></a>
### Replace code in `/src/App.vue`:

{% gist https://gist.github.com/mindaugas-pro/586b7bcf92d79cb6f8ed8557444e560a %}

<a name="chapter-10"></a>
### Replace code in `/src/main.js`:

{% gist https://gist.github.com/mindaugas-pro/8508cf3dde8b7126dfa8ff1f79c12df4 %}

<a name="chapter-11"></a>
### Create new component at `src/components/NavBar.vue`

{% gist https://gist.github.com/mindaugas-pro/ffffe517365ba2a45aee165b76082372 %}

<a name="chapter-12"></a>
### Stage and commit changes


![stage-commit changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csrkol5j2xlpb7d88g68.png)

<a name="chapter-13"></a>
### Git push code to the remote GitHub repository

```
git push
```

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

Congrats! Application is ready to be used. Run `npm run serve` to run the application if it is not running yet.