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 - Official API documentation links
-
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
-
+Page.vue component - The page's Vue component
-
Proper data access - Use useData() not direct pageContext
-
Error handling - Handle missing data gracefully
-
SEO consideration - Title and description for public pages
Every Data Hook Must Have
-
Type exports - export type Data = Awaited<ReturnType<typeof data>>
-
Error handling - Use throw render(404) for missing resources
-
Minimal data - Only return what the page needs (auto-serialized)
Every Layout Must Have
-
Children slot - <slot /> to render nested content
-
Proper scoping - Place in correct directory for inheritance
-
No data fetching assumptions - Layouts share page's +data
Every Guard Must Have
-
Clear conditions - Check auth state before render
-
Proper redirects - Use throw redirect('/login') or throw render(401)
-
Async support - Guards can be async for API checks
Core Patterns
Basic Page with Data
<!-- /pages/movies/+Page.vue --> <script setup lang="ts"> import { useData } from 'vike-vue/useData' import type { Data } from './+data'
const { movies } = useData<Data>() </script>
<template> <h1>Movies</h1> <ul> <li v-for="movie in movies" :key="movie.id"> {{ movie.title }} </li> </ul> </template>
// /pages/movies/+data.ts export type Data = Awaited<ReturnType<typeof data>>
export async function data() { const movies = await fetchMovies() return { movies } }
Layout
<!-- /pages/+Layout.vue --> <script setup> import Navigation from '../components/Navigation.vue' </script>
<template> <Navigation /> <main> <slot /> </main> </template>
Route Guard
// /pages/admin/+guard.ts import { redirect } from 'vike/abort'
export async function guard(pageContext) { if (!pageContext.user) { throw redirect('/login') } if (!pageContext.user.isAdmin) { throw render(403, 'Admin access required') } }
File Naming Conventions
File Purpose
+Page.vue
Page component
+Layout.vue
Layout wrapper
+data.ts
Server-side data fetching
+guard.ts
Route protection
+config.ts
Page/directory configuration
+title.ts
Page title
+Head.vue
Custom head tags
File Suffixes
Suffix Runs On
.server.ts
Server only (default for +data)
.client.ts
Client only
.shared.ts
Both server and client
Red Flags - Stop If You See
-
Accessing window or document in SSR code without clientOnly()
-
Missing passToClient for server data needed on client
-
Data fetching inside Vue components (use +data instead)
-
Hardcoded URLs instead of using routing
-
Missing error handling in +data hooks
-
Guards that don't throw (they must throw, not return)
-
Layouts without <slot /> for children
Common Rationalizations
Excuse Reality
"I'll add SEO later" Missing titles hurt from day one
"Guards can return false" Guards must throw redirect() or throw render()
"I can access window in +data" +data runs on server by default
"pageContext has everything" Use useData() for type-safe data access
Configuration Inheritance
Vike configs cascade down the directory tree:
pages/ +config.ts # Applies to ALL pages +Layout.vue # Global layout (marketing)/ +Layout.vue # Nested inside global layout about/+Page.vue # Has both layouts admin/ +guard.ts # Applies to all admin pages +config.ts # Admin-specific config users/+Page.vue # Protected by guard
passToClient Defaults
With client routing, these are automatically available client-side:
-
pageContext.Page
-
pageContext.data
-
pageContext.config
-
pageContext.routeParams
-
pageContext.urlOriginal
-
pageContext.urlPathname
-
pageContext.urlParsed
For custom properties (like user ), add to +config.ts :
export default { passToClient: ['user'] }
Quick Workflow
-
Need API details? → Check reference.md
-
Need examples? → Check examples.md
-
Building something? → Follow checklist above, use TodoWrite
-
Stuck? → Check official docs at https://vike.dev
Final Rule
Every Vike + Vue page must have:
- +Page.vue component
- +data.ts for server data (if needed)
- useData() for type-safe data access
- Error handling for edge cases
- SEO tags for public pages
Follow these principles for fast, SEO-friendly Vue applications.