Vue 3 + Vite SPA Development

Guide for working with Vue 3 single-page applications built with Vite, Vue Router, and Tailwind CSS + DaisyUI.

Development Commands

When working with this project, use these commands:

Project Architecture Overview

This is a modern Vue 3 single-page application (SPA) with the following architecture:

Core Structure

1. **Entry Point** (`src/main.js`)

- Creates the Vue application instance

- Configures Vue Router

- Mounts the app to the DOM

2. **Root Component** (`src/App.vue`)

- Contains the main application layout

- Includes `AppHeader`, `RouterView`, and `AppFooter`

- Provides consistent layout across all pages

3. **Router Configuration** (`src/router/index.js`)

- Defines all application routes

- Configures scroll behavior for navigation

- Enables history mode for clean URLs

Directory Structure

- `HomePage.vue`

- `CoursesPage.vue`

- `ClubsPage.vue`

- `AnnouncementsPage.vue`

- `ContactPage.vue`

- Layout components: `AppHeader.vue`, `AppFooter.vue`

- Feature-specific components

- `main.css` - Global CSS and Tailwind imports

Technology Stack

**Core Framework:**

**Build & Development:**

**Styling:**

**Configuration:**

Working with the Codebase

Adding New Pages

1. Create component in `src/pages/`

2. Add route in `src/router/index.js`

3. Link from navigation in `AppHeader.vue`

Creating Components

Styling Guidelines

Router Behavior

Development Workflow

1. **Start Development:**

```bash

npm install

npm run dev

```

2. **Make Changes:**

- Edit Vue components with hot reload

- Changes reflect instantly in browser

3. **Build for Production:**

```bash

npm run build

npm run preview # Test production build locally

```

Common Tasks

Modifying Routes

Edit `src/router/index.js` to add, remove, or configure routes. Each route should map to a page component in `src/pages/`.

Updating Styles

Adding Dependencies

```bash

npm install <package-name>

```

Debugging

Important Notes