Skip to content
Get packs

Vue 3 Expert

Guides an agent to build Vue 3 components, Pinia stores, Nuxt, Quasar/Capacitor mobile apps and Vite builds.

Source Download skill
Repository
Jeffallan/claude-skills
Stars
12,176
Licence
MIT
Files
8 files

What it does

When installed, the agent follows Vue 3 best practices when you ask for Vue work: it writes components with the Composition API and script setup syntax, uses TypeScript typed props, sets up Pinia for shared state, and can help with Nuxt 3 server-rendered sites, Quasar or Capacitor mobile apps, PWA service workers, and Vite build tuning. It loads detailed reference notes on each topic as needed and runs type checks and tests as part of its workflow.

Great for

  • Front-end developers building Vue 3 or Nuxt 3 applications
  • Teams moving older Options API or Vuex code to Composition API and Pinia
  • Developers packaging a Vue app as a mobile or PWA using Quasar or Capacitor

Skip it if

  • Non-developers who just want a website built, since the output is code that still needs a developer to run and deploy it
  • Projects on Vue 2 or React, where the Vue 3 patterns here will not apply

Try asking

  • “Create a reusable Vue 3 component with typed props and a composable for fetching a list”
  • “Set up a Pinia store for a shopping cart with getters and actions”
  • “Configure a Nuxt 3 project for server-side rendering with useFetch”
  • “Tune my Vite config to reduce bundle size and fix sourcemap output”
Step-by-step guide: how to use Vue 3 ExpertInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 8 original files, the MIT licence and an attribution note.

    vue-expert.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip vue-expert.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip vue-expert.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name your framework version and whether you use Nuxt, Quasar or plain Vite so the agent loads the right reference file.
  • Ask the agent to show the commands it runs (vue-tsc, Vitest) and review them before approving, since it executes them in your project.
  • Review generated code against your own project conventions, as the skill prescribes a fixed style such as banning Options API.

What's inside

  • references/build-tooling.md
  • references/components.md
  • references/composition-api.md
  • references/mobile-hybrid.md
  • references/nuxt.md
  • references/state-management.md
  • references/typescript.md
  • SKILL.md

Redistributed unmodified from Jeffallan/claude-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.