Vike Skills (Vue)

When to Use This Skill

• 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

• 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

• 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

+Page.vue

+Layout.vue

+data.ts

+guard.ts

+config.ts

+title.ts

+Head.vue

File Suffixes

.server.ts

.client.ts

.shared.ts

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

throw redirect()

throw render()

+data

useData()

Configuration Inheritance

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

• pageContext.Page

• pageContext.data

• pageContext.config

• pageContext.routeParams

• pageContext.urlOriginal

• pageContext.urlPathname

• pageContext.urlParsed

user

+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