vike-skills

Enforce Vike + Vue conventions for pages, +data.ts hooks, layouts, guards, and SEO head tags.

1|Updated Nov 28, 2025
One-click install
npx skills add https://github.com/yuann3/skills --skill vike-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vike-skills
Source: https://github.com/yuann3/skills/tree/main/.claude/skills/vike-skills
Command: npx skills add https://github.com/yuann3/skills --skill vike-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds fast, SEO-friendly Vue applications using Vike with SSR/SSG by standardizing page creation, data fetching, routing, and layouts.

Core Features & Use Cases

  • Standardized page scaffolds for +Page.vue and +Layout.vue.
  • Unified data fetching patterns with +data.ts and useData().
  • Routing, guards, and SEO to secure routes and manage head tags.

Quick Start

Create a new Vike + Vue page following the +Page.vue and +data.ts patterns to bootstrap a production-ready page.

Frequently Asked Questions about vike-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create SEO-friendly pages with Vike and Vue?▼

You build SEO-friendly Vue pages with Vike by following standardized file conventions like +Page.vue for UI components and managing head tags for metadata. This approach enforces best practices for fast, search-optimized SSR and SSG rendering.

What is the best way to fetch data in a Vike Vue application?▼

The best way to fetch data in a Vike Vue application is by using the +data.ts file hook alongside the useData() function in your page. This unified pattern standardizes data fetching for both server-side generation and client-side hydration.

How do I set up route guards in Vike to secure Vue routes?▼

You set up route guards in Vike to secure Vue routes by creating a +guard.ts file at the appropriate route level. This file convention enforces access control and protects specific pages before rendering begins.

Can I use nested layouts for my Vue components in Vike?▼

Yes, you can use nested layouts for your Vue components in Vike by defining +Layout.vue files within your route directories. These layout files wrap your +Page.vue components to standardize shared UI structures across multiple routes.

Does Vike support both SSR and SSG for Vue applications?▼

Yes, Vike supports both SSR and SSG for Vue applications to ensure fast page loads and SEO optimization. The framework standardizes page creation and routing to handle both server-side rendering and static site generation seamlessly.

How do I handle errors during data fetching or routing in Vike?▼

You handle errors during data fetching or routing in Vike by implementing its core error handling requirements within your +data.ts and +Page.vue files. This standardizes error boundaries and fallback UI rendering for failed requests.