docs >vue

Vue

Tech Stack

  • UI Framework: Vue 3 + Typescript
  • Styling: TailwindCSS
  • State Management: Pinia
  • Data Fetching: Axios, Tanstack Query

Getting Started

  1. Install dependencies:
    pnpm install
  2. 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 from config/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!