Creating a Shopping Cart Application Using Vue 3 and JavaScript
Written on
Chapter 1: Setting Up the Project
In this guide, we will explore how to develop a shopping cart application with Vue 3 and JavaScript. Vue 3 is the most recent iteration of the user-friendly Vue framework that enables the creation of front-end applications.
To begin, we will set up our project.
We can easily create a Vue project using the Vue CLI. To install it, execute the following command:
npm install -g @vue/cli
Alternatively, if you prefer Yarn, use:
yarn global add @vue/cli
After the installation, initiate your project with:
vue create shopping-cart
Select all default options for a smooth setup. Additionally, to enable navigation between different pages within the app, we need the Vue Router package, which can be installed via:
npm install vue-router@next
Section 1.1: Building the Shopping Cart
The next step in creating the shopping cart involves generating the necessary view files. Start by creating a views directory inside the src folder. Within this directory, add two files: Cart.vue and Store.vue for the cart and store pages, respectively.
For the Cart.vue file, we will be implementing the cart page's functionality. In main.js, we will integrate the Vue Router into our application by writing:
import { createApp } from "vue";
import App from "./App.vue";
import Cart from "./views/Cart.vue";
import Store from "./views/Store.vue";
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{ path: "/", component: Store },
{ path: "/cart", component: Cart }
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
const app = createApp(App);
app.use(router);
app.mount("#app");
In this code, we import the components we created earlier and add them to the routes array. The createRouter function is then called to instantiate the router object, incorporating our defined routes. The createWebHashHistory function ensures that a # sign is included in the URL structure.
Section 1.2: Implementing Store Functionality
To create a basic store page, we open Store.vue and utilize the v-for directive to render the store items. We will also include a "Remove from Cart" button if an item is already in the cart, and an "Add to Cart" button otherwise. This functionality is managed by the isInCart method, which checks the current items in the cart stored in the this.cart reactive property.
The addToCart function stores the item in local storage, initializing the array if it doesn't exist. We then update the this.cart property to reflect the latest state from local storage. Conversely, the removeFromCart function locates the index of the item in the cart and removes it using splice, subsequently updating local storage.
The checkout button triggers a navigation to the cart page via $router.push('/cart').
Chapter 2: Developing the Cart Page
To fill in the cart page, we configure Cart.vue with similar functionality as in Store.vue. The getCart method retrieves the cart items from local storage, setting this data to the this.cart reactive property. We also display the cart items using v-for.
Within the template, the "Remove from Cart" button invokes the removeFromCart method for item removal. Lastly, in App.vue, we include the router-view to display the current route rendered by Vue Router and adjust image sizes to 200px by 200px using CSS.
The first video titled "How To Make A Vue.js 3 Shopping Cart" provides a visual guide on building a shopping cart using Vue.js 3. It walks through the essential steps and best practices for implementation.
The second video, "Build a Shopping Cart with Vue 3, Vue Router, & VueX," expands on using Vue 3 alongside Vue Router and VueX for a comprehensive shopping cart solution.
Conclusion
Creating a straightforward shopping cart application using Vue 3 and JavaScript is quite feasible. For further insights and content, visit plainenglish.io.