8 skills · 3 categories
Claude Code skills for Vue and Nuxt
Vue skills built around the Composition API and Nuxt: composables, Pinia stores, server routes, SSR hydration issues and the component testing that catches them. Framework-neutral frontend skills such as accessibility and performance are listed too.
Start with these
- 1
Vue Composition API
Refs that stay reactive and composables that compose
Claude writes Vue 3 single-file components with typed macros, ref as the default state primitive and computed for everything derived. It catches the traps that silently stop updates — destructured reactive objects and stores, watched values instead of getters, hooks after await — and keeps server data out of Pinia, with Nuxt 4 specifics for useFetch keys and SSR-safe state.
- 2
Nuxt Apps
Fetch once on the server, render per route
Claude picks the right fetch for each context in a Nuxt app: useFetch or useAsyncData with explicit keys for render data, $fetch for events, direct calls on the server. It validates every Nitro route input, keeps secrets in server runtime config overridable by NUXT_ env vars, sets rendering per route with routeRules, and checks the production build for double fetches.
- 3
Rendering Strategies
Static where you can, per-request only where you must
Claude inventories every route first: data sources, how stale each may be, whether it is per-user, traffic share and page count. It then picks the most static mode the facts allow, maps it to the framework's real config, keeps personalized bits out of shared caches, and proves the plan with build output, cache-hit headers and a cross-user leak test.
All 8 Vue and Nuxt skills
Grouped by category. Each card opens the full playbook, example prompts and install commands.
Frontend 6
Vue Composition API
Refs that stay reactive and composables that compose
Claude writes Vue 3 single-file components with typed macros, ref as the default state primitive and computed for everything derived. It catches the traps that silently stop updates — destructured reactive objects and stores, watched values instead of getters, hooks after await — and keeps server data out of Pinia, with Nuxt 4 specifics for useFetch keys and SSR-safe state.
Nuxt Apps
Fetch once on the server, render per route
Claude picks the right fetch for each context in a Nuxt app: useFetch or useAsyncData with explicit keys for render data, $fetch for events, direct calls on the server. It validates every Nitro route input, keeps secrets in server runtime config overridable by NUXT_ env vars, sets rendering per route with routeRules, and checks the production build for double fetches.
Astro Sites
Static HTML first, hydrate only what users touch
Claude builds Astro sites that stay static by default and ship framework JavaScript only for real widgets, choosing client:visible or client:idle before client:load. Content lives in typed Content Layer collections validated at build time, images go through astro:assets, and SSR is enabled per route with an adapter rather than flipping the whole site to server output.
i18n and Localization
ICU messages, Intl formatting, RTL that holds up
Claude internationalizes an app the way localization teams need: complete ICU sentences with named arguments instead of concatenated fragments, Intl formatters with explicit locale and time zone, logical CSS and bidi isolation for Arabic and Hebrew, and path-based locale routing with reciprocal hreflang. A bundled checker fails CI on missing keys, broken ICU syntax and placeholder mismatches.
State Management
One owner per value: URL, cache, store or component
Instead of reaching for a global store by default, Claude classifies every value by lifetime and audience and assigns one owner: TanStack Query for server data, the URL for shareable filters and tabs, component state for local UI, and a small Zustand or Redux store for what remains. It hunts down effects that copy fetched data into state and produces an audit table of moves.
Web Components
Custom elements that behave like native ones
Claude designs a custom element's public API first — attributes, properties, events, slots, parts and CSS variables — then implements it with idempotent lifecycle hooks, composed events and ElementInternals for roles, states and form participation. It handles the traps that waste days: properties set before upgrade, ARIA references that cannot cross shadow roots, and Lit fields that shadow reactive accessors.
Testing 1
Install
Every Vue and Nuxt skill in one command
Installs into ~/.claude/skills/. Add --project after -- to install into the current repository.
curl -fsSL https://claudeskills.page/install.sh | sh -s -- vue-composition nuxt-apps rendering-strategies astro-sites i18n-localization state-management web-components testing-library Vue and Nuxt skills FAQ
What is the best Claude Code skill for Vue and Nuxt?
Start with Vue Composition API: Refs that stay reactive and composables that compose. Then add Nuxt Apps and Rendering Strategies, which cover the next most common Vue and Nuxt requests.
How do I install all 8 Vue and Nuxt skills at once?
Pass every name to the installer in one command: curl -fsSL https://claudeskills.page/install.sh | sh -s -- vue-composition nuxt-apps rendering-strategies astro-sites i18n-localization state-management web-components testing-library. Add --project to install them into the current repository's .claude/skills/ folder so your team gets them too.
Do these Vue and Nuxt skills work outside Claude Code?
Yes. Each skill uses only the portable Agent Skills frontmatter, so the same folder works on claude.ai, through the Claude API and in the Agent SDK. Skills that run bundled scripts need an environment with code execution.