Part 3: Edit project to meet requirements

Table Of Contents

• What is done so far?
• What I am going to build now?
• Install required packages
• Register installed packages
• Create Router at /src/router/index.js
• Create vuex at /src/store/index.js
• Create file /src/views/Products.vue/
• Create file /src/views/BillPage.vue/
• Replace code in /src/App.vue/
• Replace code in /src/main.js/
• Create new component at src/components/NavBar.vue
• Stage and commit changes
• Git push code to the remote GitHub repository
• Summary

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.

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!

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 form validation library for Vue.js
4. Yup data validation library which will be used on top of vee-validate
5. Bulma CSS

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:

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:

Create Router at /src/router/index.js

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

Create vuex at /src/store/index.js

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

Create file /src/views/Products.vue/:

Create file /src/views/BillPage.vue:

Replace code in /src/App.vue:

Replace code in /src/main.js:

Create new component at src/components/NavBar.vue

Stage and commit changes

Git push code to the remote GitHub repository

git push

Summary

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