Skip to content

How To Build a Shopping Cart with Vue 3 and JSON Server [Composition API]

Notifications You must be signed in to change notification settings

AhlamKhalid/Cart-Vue-3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

How To Build a Shopping Cart with Vue 3 and JSON Server [Composition API]

In this tutorial, we are building a functional shopping cart. We learn how to get cart items from fake API, update item quantity, delete item, calculate how many cart items, and Calculate total price.

Also, we will tackle core Vue 3 concepts like: Composition API πŸ’š script setup tag πŸ’š Class binding πŸ’š Events πŸ’š lifecycle hooks πŸ’š Vue directives: v-bind & v-for πŸ’š Components πŸ’š Props πŸ’š Emitted events πŸ’š Computed properties.

We will build a fake API using json-server package. This will help us practice doing API operations like GET, PUT, and DELETE.

YouTube tutorial

How To Build a Shopping Cart with Vue 3 and JSON Server [Composition API]

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Run JSON Server

npm run backend

Compile and Minify for Production

npm run build