Vike Skills (Vue)

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.