I want to introduce you to a starter kit that helps me in developing Front-End. It contains everything necessary for a quick start on almost any project on Vue. You will be able to find a detailed description of the project architecture with examples and references.
- api - Manages all requests to external or internal APIs.
- mock - Used for storing mock data and functions that simulate responses from external APIs.
- assets - For storing static resources of the app.
- fonts - Fonts.
- icons - Icons.
- img - Images.
- components - The main place for storing Vue components.
- common - Universal components that can be used in many parts of the app.
- feature - Components specific to certain functional parts or "features" of the app.
- layouts - Used for storing layout components that define the structure of the main page layouts in the app.
- router - For storing configurations and scripts related to routing.
- middleware - Functions that are executed before entering a route or during route changes.
- parts - For storing configurations and scripts related to routing.
- store - For storing all the logic and state of the app.
- styles - Storing styles that define the appearance of the app.
- utils - Auxiliary functions that can be used in different parts of the app.
- views - Pages or large sections of the app.
Clone the Vue3 Starter Kit from GitHub using the following command:
git clone git@github.com:frontangel/vue3-starter-kit.git
Edit the uno.config.ts
file to configure UnoCSS according to your project needs.
Modify the following SCSS files to tailor the styles:
styles/_root.scss
- Use this file to set global styles, such as CSS variables.styles/_config.scss
- This file is for setting up SCSS variables, mixins, and functions that are used across your project.
- VueUse - Collection of Vue Composition Utilities.
- Vuelidate - Vuelidate is considered model-based because the validation rules are defined next to your data, and the validation tree structure matches the data model structure.
- Faker - Generate massive amounts of fake (but realistic) data for testing and development.
- Iconify - All popular icon sets, one framework.
- Pinia - The intuitive store for Vue.js.
- axios-mock-adapter - Axios adapter that allows to easily mock requests.