Full Stack Shopping Cart With MEVN Stack [part2]

Step 3 : create an application folder for vue js:

First, let’s create an application folder called Client in the workspace:

mkdir Client
cd Client

Now, we want to set up our client Vue js for the frontend. We will be using vue-cli to build up the template.

vue create client

Now, we have a folder named Cient in our application. As we can see, now we need to run npm install inside the client folder to install all the dependencies listed in client/package.json file. So, let’s go ahead and do it.

npm install
npm run serve

Running npm run servewill open up the http://localhost:8080/in the browser which renders the default VueJS template.

Before we get starting we need to install some other features to work with like axios, vue-router and vuex for that just run this command

npm install --save axios vue-router vuex

Now that we have been installed we need to import it to our working file.

Now in our App.vue we need to create router-link to route throught all routes in our website

App.vue

As we see we have imported one component to this file called Navbar wchich well display our menu:

Navbar.vue

As we can see we get all categories from our backend and we loop throught it to display our menu, and we get a computed proprety from our store with vuex which we are going to trait in this tutorial right now to display cart length in our menu as well.

Now that we have created our menu we are going to show all our product in home page, for that we need to create a component called Products.vue which will contain all products using a simple pagiantion

Products.vue

As we see we have imported one component called Card.vue which we have send with it all our products as props

Cards.vue

Here also we have imported Card component which contain informations about specifc product

Card.vue

To add a new item to cart we passe our product throught parameter to add ToCart function which is stored in mixins file because we are going to use same function in other place thats why we have a mixis file

mixins

To react with our cart we have used vuex that will simplify gettenig and setting our data to our checkout page.

Store file

Now, we need to define routes array and add this component to this list.

In our root directory we need to create folder called route which contain index.js file where we are going to register all our routes there

To Read description about a specific product we need component called Product.vue where we display all informations about one product

product.vue

Here also we have use a mixins wich contain addToCart function that we have been used before.

Step 3 : Checkout

Let’s first create a component file called checkout wich will contain our product that we need to buy:

Checkout component

checkout

As we see here we have used Stripe for payment, so to used it with express we need to go back to our backend file and add new route for checkout

In app.js we have one route ‘/charge’ which will take care about our payment

Stripe for express

If all are working well we are getting back a response to our checkout component which will redirect us to thankyou page:

Thankyou page

Code for Client application: https://github.com/jaouadballat/vueexpress

Code for Server : https://github.com/jaouadballat/vueexpress-2