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

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<ReturnType<typeof data>>
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 - <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

<!-- /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 Suffixes

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

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

1. •Need API details? → Check reference.md
2. •Need examples? → Check examples.md
3. •Building something? → Follow checklist above, use TodoWrite
4. •Stuck? → Check official docs at https://vike.dev

Final Rule

Every Vike + Vue page must have:
1. +Page.vue component
2. +data.ts for server data (if needed)
3. useData() for type-safe data access
4. Error handling for edge cases
5. SEO tags for public pages

Follow these principles for fast, SEO-friendly Vue applications.