Create a Shopping Cart with Vue 3 and JavaScript

Photo by Peter Bond on Unsplash

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a shopping cart app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create shopping-cart

and select all the default options to create the project.

We also need the Vue Router package to let us navigate to different pages in the app.

To do this, we run:

npm i vue-router@next

Create the Shopping Cart

The first step for creating the shopping cart is to create the view files.

We create the views folder in the src folder.

Then inside it, we add the Cart.vue and Store.vue files to create the store page which we can browser.

Cart.vue has the cart page.

Then in main.js , we add the Vue Router into our app by writing:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import Cart from "./views/Cart";
import Store from "./views/Store";
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");

We import the view component files we created earlier.

Then we add them to the routes array.

Next, we call createRouter to create the router object.

We add the routes object, we created earlier inside the argument object.