The Vuejs-Store project is a basic online store application built using Vue.js. It includes features such as product listing, product details, shopping cart functionality, and checkout process.
- Product Listing: Browse through a list of products with filters and sorting options.
- Product Details: View detailed information about each product, including description, price, and images.
- Shopping Cart: Add and remove products from the cart, with real-time updates on the cart contents.
- Vue Fragment: This feature in Vue 3 allows for multiple root elements in a template, eliminating the need for a top-level element.
- Teleport Component: This feature in Vue 3 enables placing HTML elements anywhere in the DOM tree, making it useful for dialog and modal components.
- <script setup>: This experimental feature in Vue 3 provides a sugar syntax for using Composition API inside Single File Components (SFCs).
- <style vars>: This experimental feature in Vue 3 allows for state-driven CSS variables inside SFCs.
- Frontend Framework: Vue.js
- State Management: Vuex
- Routing: Vue Router
- Build Tool: Vite
- Package Manager: npm
- Recommended IDE Setup: VSCode + Volar (and disable Vetur)
- Customize configuration: See Vite Configuration Reference
-
Clone the repository:
git clone https://github.com/Omarmoatz/Vuejs-Store.git -
Navigate to the project directory:
cd Vuejs-Store -
Install dependencies:
npm install -
Run the development server:
npm run dev -
Access the application in your browser at
http://localhost:8080/
src/components: Contains Vue components used in the application.src/views: Contains the main views of the application.src/router: Contains the Vue Router configuration.src/store: Contains the Vuex store setup.src/assets: Contains static assets like images and styles.public: Contains the index.html file and other static assets.
If you would like to contribute to this project, feel free to fork the repository and submit a pull request with your changes.