Full Stack Shopping Cart With MEVN Stack [part2]

Jaouad Ballat
3 min readMar 3, 2018


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


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


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


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


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


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


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


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

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



Jaouad Ballat

Full Stack Web Developer from Morocco. Telecommunications Engineering graduate. Been working in web development since graduation.