--- name: vike-skills description: Use when building or working with Vike + Vue SSR\/SSG applications - establishes best practices for page creation, data fetching, routing, and layouts --- # Vike Skills (Vue) **Core principle:** Build fast, SEO-friendly Vue applications with server-side rendering using Vike's flexible architecture. ## When to Use This Skill **Always use when:** - Creating new Vike + Vue pages - Setting up data fetching with `+data` hooks - Configuring layouts and nested layouts - Implementing route guards and authentication - Managing head tags and SEO - Working with client-only components **Don't use for:** - Non-Vike Vue applications (use Nuxt or plain Vue) - React or Solid projects (use vike-react or vike-solid) ## Documentation Quick Links - **[reference.md](.\/reference.md)** - Official API documentation links - **[examples.md](.\/examples.md)** - Vue + Vike patterns and code examples - **Official Vike Docs** - https:\/\/vike.dev ## Development Checklist When creating a new page, use TodoWrite to track: - [ ] Create `+Page.vue` component - [ ] Add `+data.js` if page needs data fetching - [ ] Use `useData()` to access data in component - [ ] Add `+guard.js` if page requires authentication - [ ] Configure head tags (`+title`, `+description`) for SEO - [ ] Handle errors with `throw render()` or `throw redirect()` - [ ] Use `clientOnly()` for browser-only components ## Essential Requirements ### Every Page Must Have 1. **`+Page.vue` component** - The page's Vue component 2. **Proper data access** - Use `useData()` not direct pageContext 3. **Error handling** - Handle missing data gracefully 4. **SEO consideration** - Title and description for public pages ### Every Data Hook Must Have 1. **Type exports** - `export type Data = Awaited>` 2. **Error handling** - Use `throw render(404)` for missing resources 3. **Minimal data** - Only return what the page needs (auto-serialized) ### Every Layout Must Have 1. **Children slot** - `` to render nested content 2. **Proper scoping** - Place in correct directory for inheritance 3. **No data fetching assumptions** - Layouts share page's `+data` ### Every Guard Must Have 1. **Clear conditions** - Check auth state before render 2. **Proper redirects** - Use `throw redirect('\/login')` or `throw render(401)` 3. **Async support** - Guards can be async for API checks ## Core Patterns ### Basic Page with Data ```vue