--- slug: "vue-nuxt-best-practices" source_type: "readme" source_url: "https://cdn.jsdelivr.net/gh/vinayakkulkarni/vue-nuxt-best-practices@main/README.md" repo: "https://github.com/vinayakkulkarni/vue-nuxt-best-practices" source_file: "README.md" branch: "main" --- # Vue & Nuxt Skills for Claude Code A collection of AI agent skills focused on Vue.js and Nuxt best practices. Built for developers who want Claude Code (or similar AI coding assistants) to help with reactivity patterns, component performance, data fetching, SSR/SSG, and full-stack Vue/Nuxt development. Built by [Vinayak Kulkarni](https://vinayakkulkarni.dev). **Contributions welcome!** Found a way to improve a skill or have a new one to add? [Open a PR](#contributing). ## What are Skills? Skills are markdown files that give AI agents specialized knowledge and workflows for specific tasks. When you add these to your project, Claude Code can recognize when you're working on a Vue/Nuxt task and apply the right frameworks and best practices. ## Available Skills | Skill | Description | Triggers | | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | [vue-best-practices](https://github.com/vinayakkulkarni/vue-nuxt-best-practices/tree/HEAD/skills/vue-best-practices/) | Vue.js reactivity, components, computed, watchers, Composition API | "Vue," "ref," "reactive," "computed," "v-if," "v-for" | | [nuxt-best-practices](https://github.com/vinayakkulkarni/vue-nuxt-best-practices/tree/HEAD/skills/nuxt-best-practices/) | Nuxt data fetching, SSR, server routes, auto-imports, state | "Nuxt," "useFetch," "useAsyncData," "SSR," "useState" | | [nuxt-seo-best-practices](https://github.com/vinayakkulkarni/vue-nuxt-best-practices/tree/HEAD/skills/nuxt-seo-best-practices/) | Nuxt SEO optimization for Cloudflare — OG images, meta tags, JSON-LD, Nitro config | "SEO," "OG image," "Open Graph," "meta tags," "JSON-LD," "Cloudflare Workers" | | [nuxt-geo-best-practices](https://github.com/vinayakkulkarni/vue-nuxt-best-practices/tree/HEAD/skills/nuxt-geo-best-practices/) | Nuxt Generative Engine Optimization (GEO) — get cited by ChatGPT, Perplexity, Claude, AI Overviews | "GEO," "AEO," "AI search," "llms.txt," "GPTBot," "ChatGPT citations," "Perplexity," "AI Overviews," "generative engines" | | [nuxt-agent-ready-best-practices](https://github.com/vinayakkulkarni/vue-nuxt-best-practices/tree/HEAD/skills/nuxt-agent-ready-best-practices/) | Nuxt agent-readiness — make your site operable by autonomous agents (MCP, WebMCP, API/skill discovery, agent auth, DNS-AID) | "agent-ready," "isitagentready," "MCP," "WebMCP," "agent skills," "API catalog," "well-known discovery," "DNS-AID," "agentic commerce" | ## Installation ### Option 1: CLI Install (Recommended) Use [skills](https://github.com/vercel-labs/skills) to install skills directly: ```bash # Install all skills npx skills add vinayakkulkarni/vue-nuxt-best-practices # Install specific skills npx skills add vinayakkulkarni/vue-nuxt-best-practices --skill vue-best-practices # List available skills npx skills add vinayakkulkarni/vue-nuxt-best-practices --list ``` This automatically installs to your `.claude/skills/` directory. ### Option 2: Clone and Copy Clone the entire repo and copy the skills folder: ```bash git clone https://github.com/vinayakkulkarni/vue-nuxt-best-practices.git cp -r vue-nuxt-best-practices/skills/* .claude/skills/ ``` ### Option 3: Git Submodule Add as a submodule for easy updates: ```bash git submodule add https://github.com/vinayakkulkarni/vue-nuxt-best-practices.git .claude/vue-nuxt-best-practices ``` Then reference skills from `.claude/vue-nuxt-best-practices/skills/`. ### Option 4: Fork and Customize 1. Fork this repository 2. Customize skills for your specific needs 3. Clone your fork into your projects ## Usage Once installed, just ask Claude Code to help with Vue/Nuxt tasks: ``` "Help me optimize this Vue component for performance" -> Uses vue-best-practices skill "Set up data fetching with useFetch in Nuxt" -> Uses nuxt-best-practices skill "What's the correct way to use computed properties?" -> Uses vue-best-practices skill "Create an SSR-safe server route with validation" -> Uses nuxt-best-practices skill ``` You can also invoke skills directly: ``` /vue-best-practices /nuxt-best-practices /nuxt-seo-best-practices /nuxt-geo-best-practices /nuxt-agent-ready-best-practices ``` ## Skill Categories ### Vue Best Practices | Category | Impact | Topics | | ------------------------ | ----------- | -------------------------------------------------- | | Reactivity Fundamentals | CRITICAL | ref vs reactive, destructuring, toRefs, shallowRef | | Component Performance | CRITICAL | v-once, v-memo, async components, KeepAlive | | Computed & Watchers | HIGH | caching, dependencies, deep watchers | | Template Optimization | MEDIUM-HIGH | v-show vs v-if, keys, v-if with v-for | | Composition API Patterns | MEDIUM | single responsibility, return refs | ### Nuxt Best Practices | Category | Impact | Topics | | --------------------------- | ----------- | ----------------------------------------------------------- | | Data Fetching | CRITICAL | useFetch, unique keys, transform, `enabled` option (4.5) | | Auto-Imports & Organization | CRITICAL | barrel exports, component naming, type locations | | Server & API Routes | HIGH | validated input (Zod), route meta, runtime config | | Rendering Modes | HIGH | ClientOnly, route rules, SSR streaming (4.5) | | State Management | MEDIUM-HIGH | useState for SSR-safe state | | Pages, Layouts & Navigation | MEDIUM | useLayout, named views, NuxtLink custom-slot prefetch (4.5) | | Type Safety | MEDIUM | no any, strict emits, import paths | ### Nuxt SEO Best Practices | Category | Impact | Topics | | ------------------------- | -------- | -------------------------------------------------- | | OG Image Generation | CRITICAL | @cf-wasm/og, Satori plain JS objects, no React | | Page SEO & Meta | HIGH | usePageSeo composable, Open Graph, Twitter Cards | | Structured Data | MEDIUM | JSON-LD, WebApplication schema, Rich Results | | Cloudflare & Nitro Config | HIGH | compatibilityDate, nodeCompat, SSR externals, WASM | ### Nuxt GEO Best Practices Get cited by ChatGPT, Perplexity, Claude, Google AI Overviews & AI Mode, Gemini. Built on the GEO arxiv paper (Aggarwal et al., KDD 2024) and 2,500+ tracked AI prompts from the Semrush AI Visibility Index. | Category | Impact | Topics | | ---------------------- | -------- | -------------------------------------------------------------------------------------------------- | | Content Extractability | CRITICAL | Statistics, citations, quotations (+40% lift), self-contained chunks, no keyword stuffing | | AI Crawler & Discovery | CRITICAL | llms.txt, robots.txt for GPTBot/ClaudeBot/PerplexityBot/Google-Extended, SSR for crawlers, sitemap | | Entity Clarity | HIGH | Organization/Person/FAQPage/HowTo JSON-LD, sameAs cross-references, E-E-A-T | | Page-Level GEO | HIGH | usePageGeo composable, dateModified freshness signals | ### Nuxt Agent-Ready Best Practices Make your site operable by autonomous AI agents (not just cited by them) — measured by the [isitagentready.com](https://isitagentready.com) scanner. A different axis from GEO: GEO is about being _cited_, agent-readiness is about being _operated_. Shared primitives (robots.txt, llms.txt, sitemap) come from the GEO skill; this adds the agent-operation layer. Two load-bearing traps captured: the honesty rule (never publish discovery for services that don't exist) and the Nitro/Workers `event.$fetch` self-loopback bug. | Category | Impact | Topics | | --------------- | ------ | ------------------------------------------------------------------------------- | | Discoverability | HIGH | RFC 8288 Link headers, RFC 9727 API catalog, agent-skills index (sha256 digest) | | Content | HIGH | Markdown content negotiation (Accept: text/markdown), in-process event.$fetch | | MCP & Tools | MEDIUM | WebMCP (navigator.modelContext), MCP Server Card (honesty-gated) | | Agent Auth | LOW | OAuth/OIDC discovery, oauth-protected-resource, auth.md (honesty-gated) | | DNS | MEDIUM | DNS-AID records + DNSSEC requirement | ## Contributing Found a way to improve a skill? Have a new skill to suggest? PRs and issues welcome! **Ideas for contributions:** - Improve existing skill instructions or frameworks - Add new best practices or patterns - Fix typos or clarify confusing sections - Suggest new skills (open an issue first to discuss) - Add examples or case studies **How to contribute:** 1. Fork the repo 2. Edit the skill file(s) 3. Submit a PR with a clear description of what you improved ### Skill File Structure Each skill is a directory containing a `SKILL.md` file: ``` skills/ skill-name/ SKILL.md ``` The `SKILL.md` file follows this format: ```markdown --- name: skill-name description: One-line description for skill selection with trigger words --- # Skill Name [Full instructions for the AI agent] ``` ## Related Projects - [coreyhaines31/marketingskills](https://github.com/coreyhaines31/marketingskills) - Marketing skills for Claude Code - [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills) - React best practices ## License MIT - Use these however you want.