First Steps with Vue.js Tutorial: Create Your Own Basic E-Commerce Cart

In this Vue.js tutorial blog post, you will learn the basics of Vue.js by creating a simple e-commerce functionality. This will illustrate some of the most useful concepts of Vue.js and help you get familiarized with this cool, lightweight JavaScript framework.

Talking just a bit about Vue.js, this framework is growing in popularity and currently has more stars on Github than the other popular JavaScript frameworks:

This doesn’t mean that it’s the most used, but it’s still really interesting data. Also, according to Google trends, it seems that interest in Vue.js has increased considerably over the last 5 years:

So, there are no excuses to not take a look at Vue.js and learn a bit about this framework.

Starting… CLI

The first step to create our project is to use cli.vue.js tools. To do this, you’ll need to install the command line interface that Vue.js uses, which is as easy as copying the following code into your terminal:
 

npm install -g @vue/cli

After that, you can create your project using:
 

vue create vue-shop

Just select the default options; you can use either yarn or npm. In my case, I used yarn. Once you finish this step, go inside the project directory and type:

yarn serve

This will start the server and the app.
 

Taking a Look at the Files

First, to improve the look and feel of the app, we will use Bootstrap 4.0 by adding it to the index.html.

Now, if you go to your project directory, inside public you will see the index.html file; that file will instantiate the main component, “App.” This is where everything starts. The basic files to use Vue.js from scratch are: main.js, App.vue and the “components/” folder.
 

Components are one of the most important concepts here. They have several sections: the component name, the template (which is mostly the html), and the script section, which adds the Javascript functionality. In the script section, you can add or instantiate the data to use, import other components, create computed, watch and/or mounted methods (I’ll talk about these soon), and manage the properties(props). The components can be used in a general way, or imported for specific requirements.

Continuing with our example, the main idea is to display some products, be able to add all or some of them to the cart, and calculate the total purchase amount — the basic functionalities of a shopping cart. As a data source, we are going to create a simple products.json in our root directory. The idea of this blog post is just to consume data, not to show database connection, but if you want to try an API consumption tool, I strongly recommend the “Axios” library.

Axios can be invoked with something like this:

For our example, the products.json will contain Lego® info as items and look like this:

Ok, that was easy. The second step is to import these items into the data app component, and after that, we are going to be able to use the data properties. But first, what are data properties? That’s a basic question, and it’s a good idea to first explain the basics of the component structure in order to better understand the main concepts:

• Data: a JavaScript object with values.

• Props: custom attributes that can be registered in a component.

• Template: the html code snippet that might display variables, etc.

• Mounted: an action that will be completed when an object has been created.

• Computed: a property used to manipulate and perform operations on the data; it can be cached and is extremely high-performing.

• Methods: functions that handle an object.

• Watchers: thought of as a part of the reactivity system; the name matches the action.

These elements can be used in a general way, or imported for use in specific components. Once we have imported the products.json into our main App.vue component, we can do a simple return inside data,  and a cool way to see the data in our Chrome browser is by installing Vue.js Devtools, which allows you to inspect the data like this:

Continuing with the exercise, we will now create a components directory in the root file system. In it, it’s time to make a Product.vue component that will be used to separately manage the cart’s items. 

This new Product.vue component should be imported into the main component(App), and the products.json must be assigned to it in order to display all the products. This new component contains simple html code to separately display product information like title, price, etc. Now, in order to display these products, we will implement a v-for mounted in the Product component. The code should look like this:

Keep in mind that we need add a key or id (:key=”product.id”) to any products that we intend to use. After the loop, the app should then display something like this:

To continue playing with the Product component, the idea here is to use the props to manage the array key and pass it to the App loop. After that, you should see the correct info in the main object array:

Adding Products to the Cart

This is one of the main functionalities of this basic example. To add elements to the cart, we are going to need another array with the added products. This new array will be in the App.vue component, but first we need to be sure that the button that adds items to the cart works. To determine this, we need to add a click event and a new function that will add the clicked items to the array. We are going to create a method that adds items to the cart in the parent component; the event is managed in the template using: 
 

After creating a new array (which we called “cart”), we should now be able to add products to it. And considering that we already have the necessary code in the template, the addToCart function that we discussed previously should be able to push the requested products to the cart in the following way: 
 

this.cart.push(product);

One nice thing to do is to disable the “Add to cart” button if the item has already been added. To do this, we will create a function called isInCart(), which will check if the product is in the cart array and return either ‘true’ or ‘false.’

The Cart Component

This component will display the products that were added to the cart. First, we will create it and import it into App.vue. Remember to add the new object as a component to be used; this component should receive the items that are in the cart, and using a loop it will display them:

The second important functionally that we should not forget is removing elements from the cart. After adding a “Remove” button to all items already added to the cart, we will add a click event using $emit, which will basically emit data to the parent component in order for the cart to be updated. Using remove-from-cart, we will bind this event to the parent App.vue where the event is listened for using the function removeFromCart(). This is very reactive because the cart buttons are automatically updated.

Displaying the Cart Total

To display this total, we will make a computed property called total, which will update the items array every time it changes. To accomplish this, we will use a reducer function that is going to display an accumulator with the total price as a number, with zero as the default.

Finally, we can add a “Pay Now” button to clean the cart; that button will emit a function called pay, and in App.vue, we will add the v-on for the new pay function. This method will basically clean the array and display an alert with a “success” message.

It is also a good idea to disable the pay button if there are no items in the cart. We can do this by binding the disable property to the array using the array length:

Pay Now

Finally, we have a really basic idea of an e-commerce shopping cart using Vue.js objects, components, functions and common operators for managing arrays.

I hope that this example has given you an introductory idea about how Vue.js works. In my opinion, this JavaScript framework has a lot of potential; why not give it a try?

Check the code in this repo and let me know if you have any comments.

Enjoy!