Building a Shopping List with VueJS
Last Updated :
24 Jul, 2024
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/[email protected]/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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">
</script>
<!-- font icon link -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity=
"sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous" />
<!-- CSS style -->
<style>
@import url(
"https://fonts.googleapis.com/css2?family=Rubik&display=swap");
#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.
Similar Reads
Building A Weather App Using VueJS We will explore how to create a weather application using Vue.js. We'll cover an approach to fetching weather data, displaying current weather conditions, and forecasting. By the end of this guide, you'll have a fully functional weather application that displays current weather information and forec
6 min read
Build a Calculator with VueJS We'll learn how to build a simple calculator app using Vue.js. A calculator is a fundamental tool for performing mathematical calculations, and building one using Vue.js is a great way to understand the basics of Vue.js components, data binding, and event handling. Step-by-step guide to set up the p
3 min read
Build a Todo List App using VueJS This article provides an in-depth exploration of creating a Todo List application using Vue.js. It covers various aspects of building the application, whether you're new to Vue.js or looking to expand your skills, this comprehensive guide offers valuable insights and practical instructions to help y
4 min read
Build a Movie App with VueJS We will build a movie application using Vue.js. By the end, you'll have a fully functional movie app that will allow users to search for movies, view their details, and get information such as title, year, rating, and plot. Prerequisites:Vue.jsNode.js and npm are installed on your system.Approach Vu
5 min read
Vue.js Form Input Binding with Radio Option Vue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. We can create Single Page Applications as well as Full Stack applications.Input Binding is used to sync and maintain the state of form input elements wit
3 min read
Build a Music app using VueJS We'll guide you through the process of building a music player application using Vue.js, a popular JavaScript framework for building user interfaces. The application will allow users to play, pause, and skip through a collection of songs, as well as view and select songs from a library. Preview Prer
9 min read