docs >vue
Vue
Tech Stack
- UI Framework: Vue 3 + Typescript
- Styling: TailwindCSS
- State Management: Pinia
- Data Fetching: Axios, Tanstack Query
Getting Started
- Install dependencies:
pnpm install
- Run the local server:
pnpm run
Folder Structure & Key Files
vue/ ├── .gitignore, .editorconfig, .gitattributes, .prettierrc.json # Project configs ├── .vscode/ # VSCode settings ├── env.d.ts # TypeScript env types ├── eslint.config.ts # Linting config ├── index.html # App entry HTML ├── package.json, pnpm-lock.yaml # Package management ├── public/ # Static assets ├── README.md # Template readme ├── src/ # Source code │ ├── api/ # API logic │ │ ├── index.ts # API entry │ │ └── products/ # Example API modules │ ├── App.vue # Root Vue component │ ├── assets/ # Global styles & images │ │ └── index.css # Main CSS │ ├── components/ # Reusable UI components │ ├── config/ # App-wide config (e.g., axios) │ │ └── axios.ts # Axios instance/config │ ├── layout/ # Layout components │ │ └── DefaultLayout.vue # Main layout │ ├── locales/ # i18n files │ ├── main.ts # App entry point │ ├── modules/ # Feature modules │ │ └── home/ │ │ └── HomeView.vue # Example feature view │ ├── router/ # Vue Router setup │ │ └── index.ts │ └── stores/ # Pinia stores ├── tsconfig.*.json # TypeScript configs └── vite.config.ts # Vite build config
Each folder has a clear responsibility, e.g. modules/
for feature modules, api/
for API logic, stores/
for Pinia stores, and router/
for Vue Router setup.
Architecture Overview
- Modular: Features are organized in
modules/
for scalability. - Separation of Concerns: API, config, layout, and store logic are isolated.
- Reusable Components: Place shared UI in
components/
. - Configurable: Easily extend with new modules, layouts, or API endpoints.
Best Practices
- Use
modules/
for new features. - Keep API logic in
api/
and use Axios instance fromconfig/axios.ts
. - Use Pinia for state management in
stores/
. - Organize layouts and shared UI for consistency.
For more details, see the template's README.md
or explore the codebase!