---
## 🚀 Getting Started
### 1️⃣ Install dependencies
```bash
npm install
```
### 2️⃣ Run development server
```bash
npm run dev
```
App runs at:
👉 **[http://localhost:3000](http://localhost:3000)**
### 3️⃣ Build for production
```bash
npm run build
```
### 4️⃣ Preview production build
```bash
npm run preview
```
### 5️⃣ Lint & auto-fix
```bash
npm run lint
```
---
## 🗂 Project Structure (High Level)
```
src/
├── main.js # App entry point
├── plugins/ # Vuetify, Router, Pinia, Fonts
├── router/ # Route definitions
├── store/ # Pinia stores
├── layouts/ # App layouts (Default, etc.)
├── views/ # Route-level pages
├── components/ # Reusable UI components
├── composables/ # Shared logic hooks
├── styles/ # Global SCSS & themes
├── assets/ # App assets
public/ # Static files
```
> 🔹 `@` alias points to `src/` (configured in `vite.config.js`)
---
## 🧩 App Bootstrap Flow
1. `createApp(App)` → `src/main.js`
2. Load global SCSS (theme, typography)
3. Register plugins via `registerPlugins(app)`
4. Mount app to `#app`
---
## 🧭 Routing System
- Centralized in `src/router/index.js`
- Uses `createWebHistory`
- Default layout wraps all child routes
- Pages are **lazy-loaded** for performance
### Example Route
```js
{
path: 'my-feature',
name: 'my-feature',
component: () => import('@/views/MyFeature.vue'),
}
```
### Navigation
```vue
<router-link :to="{ name: 'my-feature' }" />
```
---
## 🧱 Layout System
**Default Layout**
- Header (AppBar)
- Footer
- `<router-view />` for pages
Location:
```
src/layouts/default/
├── Default.vue
├── AppBar.vue
├── Footer.vue
└── View.vue
```
### Creating a New Layout
1. Create a layout component under `src/layouts/`
2. Assign it to a route
3. Place `<router-view />` inside the layout
---
## 🗂 State Management (Pinia)
- Global Pinia instance registered via plugins
- Stores live in `src/store/`
### Example Store
```js
import { defineStore } from "pinia";
export const useUserStore = defineStore("user", {
state: () => ({
profile: null,
}),
actions: {
setProfile(data) {
this.profile = data;
},
},
});
```
Usage:
```js
const userStore = useUserStore();
userStore.setProfile(profile);
```
---
## 🔌 Plugin System
All plugins are registered in **one place**:
```
src/plugins/index.js
```
Includes:
- Vuetify
- Vue Router
- Pinia
- WebFontLoader
### Adding a New Plugin
```bash
npm install v-mask
```
```js
import VueMask from "v-mask";
app.use(VueMask);
```
---
## 🔁 Composables (Reusable Logic)
Located in:
```
src/composables/
```
Examples:
- Modal state handling
- Dynamic script injection
- UI helpers (size, color mapping)
### Usage Example
```js
import useClubrubiModal from "@/composables/use-clubrubi-modal";
const { openClubSignModal, setClubSignState } = useClubrubiModal();
setClubSignState(true);
```
---
## 🎨 Styling & Assets
- Global SCSS lives in `src/styles/`
- Vuetify theme variables defined in `settings.scss`
- Icons loaded via Material Design Icons
- Public assets served from `/public`
---
## 📌 Best Practices
- Keep **views thin**
- Move logic to **composables**
- Share state via **Pinia**
- Reuse UI components aggressively
- Use `@` alias for clean imports
- Run lint before commits
---
## 🧪 Troubleshooting
| Issue | Fix |
| ----------------- | ---------------------------------------- |
| App not loading | Check Node version |
| Icons missing | Run `npm install` |
| Port conflict | Change `server.port` in `vite.config.js` |
| Fonts not loading | Update WebFontLoader config |
---
## 📄 License
Apache License 2.0
---
## 🤝 Contributing
Feel free to submit issues or improvements.
Clean code, meaningful commits, and consistency are expected.
```
```
