Engineering VueComposition APIPinia

Vue Expert

Vue 3 Composition API, reactivity system, Pinia state management, Nuxt 3, Vue Router, component design patterns, and migration from Options API.

A Vue 3 expert who covers the reactivity model deeply — ref vs reactive, watchEffect internals, and when computed triggers unexpectedly. Guides teams migrating from Options API to Composition API, designs Pinia stores for complex domain state, and builds Nuxt 3 apps with SSR-friendly data fetching using useFetch and useAsyncData.

Added Mar 20, 2026

$npx skills add johnefemer/skillfish --skill vue-expert

Capabilities Real Examples Get Started Models & Context Works Great With

What This Skill Can Do

Concrete capabilities you get when you install this skill.

Design composables that encapsulate reactivity and are reusable across components

Architect Pinia stores with actions, getters, and cross-store dependencies

Implement Nuxt 3 data fetching with useFetch, useAsyncData, and server routes

Migrate Options API components to Composition API safely and incrementally

Configure Vue Router with dynamic routes, guards, and lazy-loaded views

Optimize rendering with v-memo, shallowRef, and markRaw for heavy objects

Real Conversations

See how the Vue Expert skill responds to actual requests. These are representative examples of what your AI agent will produce.

You

I want a Vue 3 composable for fetching paginated data that handles loading, error, and pagination state, and is reusable across multiple list views.

Agent

Here's a usePaginatedFetch composable using Vue 3 Composition API:

import { ref, computed, watchEffect } from 'vue';

interface Page<T> { items: T[]; total: number; }

export function usePaginatedFetch<T>(
  url: () => string,
  pageSize = 20,
) {
  const page = ref(1);
  const items = ref<T[]>([]);
  const total = ref(0);
  const loading = ref(false);
  const error = ref<Error | null>(null);

  const totalPages = computed(() => Math.ceil(total.value / pageSize));
  const hasMore = computed(() => page.value < totalPages.value);

  async function load() {
    loading.value = true;
    error.value = null;
    try {
      const res = await fetch(`${url()}?page=${page.value}&limit=${pageSize}`);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data: Page<T> = await res.json();
      items.value = data.items;
      total.value = data.total;
    } catch (e) {
      error.value = e as Error;
    } finally {
      loading.value = false;
    }
  }

  watchEffect(load); // re-fetches when url() or page changes

  return { items, loading, error, page, totalPages, hasMore, reload: load };
}

// Usage
const { items, loading, page, hasMore } = usePaginatedFetch<User>(
  () => `/api/users?search=${searchQuery.value}`,
);

The url parameter is a getter function so watchEffect tracks reactive dependencies inside it — if searchQuery changes, a new fetch fires automatically.

You

I have a computed property that filters a list of 5,000 items. It's re-evaluating on every keystroke even though the filter input hasn't changed. What's happening?

Agent

Vue's computed cache invalidates when any reactive dependency accessed during its execution changes — including reactive objects you didn't intend to access. Debug with this pattern:

1. Find unexpected dependencies:

import { onTrack } from 'vue'; // dev-only

const filtered = computed({
  get: () => items.value.filter(item => matchesSearch(item, query.value)),
  onTrack(e) { console.log('tracking:', e.key); }, // logs every reactive read
});

2. Common culprits:

// ❌ Accessing Date.now() or Math.random() inside computed — not reactive but...
// ...if items contains reactive objects with date fields, the whole object is tracked

// ❌ Using reactive() on items array — accessing items[i].updatedAt tracks ALL properties
const items = reactive(rawItems); // reads any property → triggers on any mutation

// ✅ Use shallowRef for lists — only the array reference is tracked, not item properties
const items = shallowRef<Item[]>(rawItems);

3. For 5,000 items, also debounce the input:

import { useDebouncedRef } from '@vueuse/core';
const query = useDebouncedRef('', 150); // only updates after 150ms idle

Switching to shallowRef for the items array is almost always the fix — it means Vue tracks only "did the whole array change?" not "did any property of any item change?".

Get Started

How to install and use this skill in your preferred environment.

Skills are designed for AI coding agents (Claude Code, Cursor, Windsurf) and IDE-based workflows where the agent can read files, run scripts, and act on your codebase.

Models & Context

Which AI models and context windows work best with this skill.

Recommended Models

Claude Sonnet 4 and GPT-4o have strong Vue 3 knowledge. Verify Nuxt 3 specifics against the official docs as APIs changed significantly between Nuxt 2 and 3.

Context Window

SKILL.md ~4KB. Fits in 32K context for most component work; Nuxt 3 full-stack apps benefit from 64K+.

Pro tips for best results

1

Be specific

Include numbers — users, budget, RPS — so the skill can size the architecture.

2

Share constraints

Compliance needs, team size, and existing stack all improve the output.

3

Iterate

Start with a high-level design, then ask follow-ups for IaC, cost analysis, or security review.

4

Combine skills

Pair with companion skills below for end-to-end coverage.

Works Great With

These skills complement Vue Expert for end-to-end coverage. Install them together for better results.

Senior Frontend

React, Next.js, TypeScript, Tailwind CSS, accessibility, and performance.

FrontendReact

TypeScript Pro

Advanced TypeScript patterns: generics, conditional types, mapped types, module augmentation, declaration files, and strict-mode migration guides.

TypeScriptGenerics

Playwright Pro

Production-grade Playwright testing toolkit with 55 templates and smart reporting.

TestingPlaywright

UI Design System

UI design system toolkit for tokens, components, and patterns.

UIDesign System

Next.js Developer

Next.js App Router mastery: Server/Client Components, route handlers, middleware, ISR, caching strategies, and deployment optimization.

Next.jsApp Router

$ skillfish add johnefemer/skillfish --all # install all skills at once

Ready to try Vue Expert?

Install the skill and start getting expert-level guidance in your workflow — any agent, any IDE.