Open In App

Building a Shopping List with VueJS

Improve
Improve
Like Article
Like
Save
Share
Report

The following approach covers how to build a simple shopping list app with VueJs. Vue (or Vue.js) is an open-source JavaScript framework geared towards building user interfaces, it was created by Evan You.

Prerequisites:

  • Basic understanding of HTML.
  • Basic knowledge of CSS
  • Basic knowledge of JavaScript

Including Script: We can include the Vue Js into our HTML using the following CDN link:

<script src=
    "https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js">
</script>

Example: Following is a shopping list application using VueJS.

HTML




<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8" />
  
    <!-- CDN LINK  -->
    <script src=
    </script>
  
    <!-- font icon link -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
        integrity=
"sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
        crossorigin="anonymous" />
  
    <!-- CSS style -->
    <style>
        @import url(
  
        #app-vue {
            display: flex;
            justify-content: center;
            font-family: "Rubik", sans-serif;
        }
  
        body {
            background: #313131;
            font-size: 18px;
        }
  
        .fa-plus {
            background-color: #fca954;
            color: #ffffff;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 30px;
        }
  
        .lists {
            width: 300px;
            display: flex;
            flex-direction: column;
            padding: 20px;
            background: #444444;
        }
  
        .container {
            width: 300px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            margin: 10px 0px;
            background: #444444;
            color: #aaaaaa;
        }
  
        .container input {
            width: 80%;
            padding: 8px 0px;
            outline: none;
            background: transparent;
            border: none;
            color: #aaaaaa;
            font-size: 17px;
        }
  
        ::placeholder {
            color: #aaaaaa;
        }
  
        .container-text {
            width: 300px;
            padding: 20px;
            margin: 20px 0px;
            background: #444444;
            color: #aaaaaa;
        }
  
        .text {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
  
        .text {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
  
        li {
            margin: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #aaaaaa;
        }
  
        @media (max-width: 332px) {
  
            .lists,
            .container-text,
            .container {
                width: 270px;
                max-width: 250px;
            }
        }
    </style>
</head>
  
<body>
    <div id="app-vue">
        <main>
            <div class="container-text">
                <div class="text">
                    <h1>Shopping List</h1>
                    <span>
                        <i class="fa fa-plus" 
                            aria-hidden="true">
                        </i>
                    </span>
                </div>
            </div>
            <div class="lists">
                <ul>
                    <li v-for="(list, index) in lists" 
                        :key="index">
                        {{ list }}
                        <i class="fa fa-trash" 
                            aria-hidden="true" 
                            v-on:click="removeList(index)">
                        </i>
                    </li>
                </ul>
            </div>
            <div class="container">
                <input type="text" 
                    placeholder="Create list" 
                    v-model="currentList" 
                    v-on:keyup.enter="addList" />
            </div>
        </main>
    </div>
  
    <script>
        new Vue({
            el: "#app-vue",
            data() {
                return {
                    lists: [
                        "Mackbook Pro",
                        "Google pixel 4a",
                        "Microsoft surface laptop 2",
                    ],
                    currentLists: "",
                };
            },
            methods: {
                addList: function () {
                    this.lists.push(this.currentList);
                    this.currentList = "";
                },
                removeList: function (index) {
                    this.lists.splice(index, 1);
                },
            },
        });
    </script>
</body>
  
</html>



 

Output:

Explanation: 

HTML Code: This section contains our font icon links, form input to create a new list item, and also the v-for directive to loop through the list and print their items. 

JavaScript Code: This section contains the functionality of the app. These are the following steps:

  • Create our Vue instance a Vue instance is the heart of a Vue application.
  • Return data that needs to be handled within the view. This data has to be dictated within a data option.
  • Run a list of items in the data property.
  • We can use the v-for directive to render a list of our fruit items based on an array.
  • Now let’s create a two-way data binding by using the v-model to update the element based on the input type.
  • Create a function that can enable you to delete each of our listed items.

Conclusion: This is how to set up a Vue project via static HTML using the CDN and how to create a simple shopping list in Vue. We learned about Vue instance, data, methods, conditionals, events.



Last Updated : 01 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads