Comparing vitepress with nuxt

vitepress

View full →

Author

@JetBrains

Stars

56

Repository

JetBrains/skills

vitepress/SKILL.md

VitePress is a Static Site Generator (SSG) built on Vite and Vue 3. It takes Markdown content, applies a theme, and generates static HTML that becomes an SPA for fast navigation. Perfect for documentation, blogs, and marketing sites.

Key Characteristics:

  • File-based routing with .md files
  • Vue components work directly in Markdown
  • Fast HMR with instant updates (<100ms)
  • Default theme optimized for documentation
  • Built-in search (local or Algolia)

Before working with VitePress projects:

  • Check .vitepress/config.ts for site configuration
  • Look at .vitepress/theme/ for custom theme extensions
  • The public/ directory contains static assets served as-is

The skill is based on VitePress 1.x, generated at 2026-01-28.

Core

TopicDescriptionReference
ConfigurationConfig file setup, defineConfig, site metadatacore-config
CLICommand-line interface: dev, build, preview, initcore-cli
RoutingFile-based routing, source directory, rewritescore-routing
MarkdownFrontmatter, containers, tables, anchors, includescore-markdown

Features

Code & Content

TopicDescriptionReference
Code BlocksSyntax highlighting, line highlighting, diffs, focusfeatures-code-blocks
Vue in MarkdownComponents, script setup, directives, templatingfeatures-vue
Data LoadingBuild-time data loaders, createContentLoaderfeatures-data-loading
Dynamic RoutesGenerate pages from data, paths loader filesfeatures-dynamic-routes

Theme

TopicDescriptionReference
Theme ConfigNav, sidebar, search, social links, footertheme-config
CustomizationCSS variables, slots, fonts, global componentstheme-customization
Custom ThemeBuilding themes from scratch, theme interfacetheme-custom

Advanced

TopicDescriptionReference
InternationalizationMulti-language sites, locale configurationadvanced-i18n
SSR CompatibilityServer-side rendering, ClientOnly, dynamic importsadvanced-ssr

Recipes

TopicDescriptionReference
DeploymentGitHub Pages, Netlify, Vercel, Cloudflare, Nginxrecipes-deploy

Author

@unknown

Stars

0

Repository

joaopedrodcf/yokaidex

.agents/skills/nuxt/SKILL.md

Nuxt 4+ Development

Progressive guidance for Nuxt 4+ projects (v4.3+) with latest patterns and conventions.

When to Use

Working with:

  • Server routes (API endpoints, server middleware, server utils)
  • File-based routing (pages, layouts, route groups)
  • Nuxt middleware (route guards, navigation)
  • Nuxt plugins (app extensions)
  • Nuxt-specific features (auto-imports, layers, modules)

Available Guidance

Read specific files based on current work:

For Vue composables: See vue skill composables.md (VueUse, Composition API patterns) For UI components: use nuxt-ui skill For database/storage: use nuxthub skill For content-driven sites: use nuxt-content skill For creating modules: use nuxt-modules skill For project scaffolding/CI: use ts-library skill

Loading Files

Consider loading these reference files based on your task:

DO NOT load all files at once. Load only what's relevant to your current task.

Quick Start

// server/api/hello.get.ts
import { z } from "zod";

export default defineEventHandler(async (event) => {
    const { name } = await getValidatedQuery(
        event,
        z.object({
            name: z.string().default("world"),
        }).parse,
    );
    return { message: `Hello ${name}` };
});

Nuxt 4 vs Older Versions

You are working with Nuxt 4+. Key differences:

Old (Nuxt 2/3)New (Nuxt 4)
<Nuxt /><NuxtPage />
context.paramsgetRouterParam(event, 'name')
window.originuseRequestURL().origin
String routesTyped router with route names
Separate layouts/Parent routes with <slot>

If you're unsure about Nuxt 4 patterns, read the relevant guidance file first.

Latest Documentation

When to fetch latest docs:

  • New Nuxt 4 features not covered here
  • Module-specific configuration
  • Breaking changes or deprecations
  • Advanced use cases

Official sources:

Token Efficiency

Main skill: ~300 tokens. Each sub-file: ~800-1500 tokens. Only load files relevant to current task.

AI Skill Finder

Ask me what skills you need

What are you building?

Tell me what you're working on and I'll find the best agent skills for you.

vitepress vs nuxt - Compare Skills | RuleSkill