Vue Shopping Cart - verdant vie

A online shopping page practice for a fictional shop.

Live link

• View Demo

Built with

• Bootstrap
• SCSS
• Vue
• Vue Router

Screenshots

🟢 Select Item 🟢

🟢 Shopping Cart 🟢

🟢 Check Out 🟢

File structure

Click to open file structure

├── node_modules
├── data
│    └── data.json
├── public
├── src
│   ├── assets
│   │     └── images
│   │
│   ├──components
│   │     │
│   │     ├── Navbar.vue
│   │     ├── NavItem.vue
│   │     ├── ProductCard.vue
│   │     ├── ProductModal.vue
│   │     ├── ShoppingBag.vue
│   │     ├── ShoppingCart.vue
│   │     ├── ShoppingCartItem.vue
│   │     ├── CheckoutItem.vue
│   │     ├── Footer.vue
│   │     └── FooterCanvas.vue
│   │
│   ├──composables
│   │     │
│   │     ├── useFooterContent.js
│   │     ├── useImageLoad.js
│   │     ├── useLocalStorage.js
│   │     ├── useProducts.js
│   │     ├── useShoppingCart.js
│   │     └── useWindowWidth.js
│   │
│   ├──pages
│   │     │
│   │     ├── Accessorty.vue
│   │     ├── Body.vue
│   │     ├── Checkout.vue
│   │     ├── Face.vue
│   │     ├── Hair.vue
│   │     ├── HomePage.vue
│   │     ├── HomeStyle.vue
│   │     ├── NotFound.vue
│   │     ├── Test.vue
│   │     └── Thankyou.vue
│   ├── router
│   │     └── index.js
│   │
│   ├──scss
│   │    ├── globals
│   │    ├── utility
│   │    └── custom.scss
│   │
│   ├── App.vue
│   └── main.js
│
├── .gitignore
├── index.html
...
└── README.md

Acknowledgments

Icons Source: Material Icons, Icons8

Photos from: Unsplash, Pexels