Guide for developing Vue 3 single-page applications with Vite, Vue Router, and Tailwind CSS + DaisyUI styling system
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 60/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
Guide for working with Vue 3 single-page applications built with Vite, Vue Router, and Tailwind CSS + DaisyUI.
When working with this project, use these commands:
This is a modern Vue 3 single-page application (SPA) with the following architecture:
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
- `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
**Core Framework:**
**Build & Development:**
**Styling:**
**Configuration:**
1. Create component in `src/pages/`
2. Add route in `src/router/index.js`
3. Link from navigation in `AppHeader.vue`
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
```
Edit `src/router/index.js` to add, remove, or configure routes. Each route should map to a page component in `src/pages/`.
```bash
npm install <package-name>
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/vue-3-vite-spa-development/raw