Auto-activate for nuxt.config.ts, nuxt.config.js, .nuxt/ directory. Vue SSR framework expertise for Nuxt 3. Use when: using useFetch, useAsyncData, Nitro server routes, SSR/SSG rendering, nuxt.config.ts, or building any Nuxt application. Not for plain Vue (see vue), React (see react), or non-Nuxt Vue SSR.
From flownpx claudepluginhub cofin/flow --plugin flowThis skill uses the workspace's default tool permissions.
references/litestar_vite.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
<!-- pages/users/[id].vue -->
<script setup lang="ts">
const route = useRoute();
const { data: user, error } = await useFetch(`/api/users/${route.params.id}`);
definePageMeta({
layout: 'admin',
middleware: ['auth'],
});
useHead({
title: () => user.value?.name ?? 'User',
});
</script>
<template>
<div v-if="error">Error: {{ error.message }}</div>
<div v-else-if="user">
<h1>{{ user.name }}</h1>
<p>{{ user.email }}</p>
</div>
</template>
</example>
// server/api/users/[id].get.ts
export default defineEventHandler(async (event) => {
const id = getRouterParam(event, 'id');
const user = await db.users.findUnique({ where: { id } });
if (!user) {
throw createError({
statusCode: 404,
message: 'User not found',
});
}
return user;
});
// server/api/users.post.ts
export default defineEventHandler(async (event) => {
const body = await readBody(event);
const user = await db.users.create({ data: body });
return user;
});
</example>
// composables/useAuth.ts
export function useAuth() {
const user = useState<User | null>('auth-user', () => null);
const isAuthenticated = computed(() => !!user.value);
async function login(credentials: Credentials) {
const { data } = await useFetch('/api/auth/login', {
method: 'POST',
body: credentials,
});
user.value = data.value;
}
async function logout() {
await useFetch('/api/auth/logout', { method: 'POST' });
user.value = null;
navigateTo('/login');
}
return { user, isAuthenticated, login, logout };
}
</example>
<script setup lang="ts">
// Simple fetch
const { data, pending, error, refresh } = await useFetch('/api/items');
// With options
const { data: items } = await useFetch('/api/items', {
query: { page: 1, limit: 10 },
pick: ['id', 'name'], // Only include these fields
transform: (data) => data.items,
watch: [page], // Re-fetch when page changes
});
// Lazy fetch (doesn't block navigation)
const { data, pending } = useLazyFetch('/api/slow-data');
// useAsyncData for custom async operations
const { data } = await useAsyncData('key', () => {
return $fetch('/api/items');
});
</script>
</example>
// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
const { isAuthenticated } = useAuth();
if (!isAuthenticated.value && to.path !== '/login') {
return navigateTo('/login');
}
});
// middleware/admin.ts (named middleware)
export default defineNuxtRouteMiddleware(() => {
const { user } = useAuth();
if (user.value?.role !== 'admin') {
throw createError({
statusCode: 403,
message: 'Forbidden',
});
}
});
</example>
// plugins/api.ts
export default defineNuxtPlugin(() => {
const api = $fetch.create({
baseURL: '/api',
onRequest({ options }) {
const token = useCookie('token');
if (token.value) {
options.headers = {
...options.headers,
Authorization: `Bearer ${token.value}`,
};
}
},
});
return {
provide: { api },
};
});
// Usage: const { $api } = useNuxtApp();
</example>
// nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true },
'/blog/**': { isr: 3600 }, // ISR: revalidate every hour
'/admin/**': { ssr: false }, // SPA mode
'/api/**': { cors: true },
},
});
</example>
// With useState (SSR-safe)
const count = useState('counter', () => 0);
// With Pinia
// stores/user.ts
export const useUserStore = defineStore('user', () => {
const user = ref<User | null>(null);
async function fetch() {
user.value = await $fetch('/api/user');
}
return { user, fetch };
});
</example>
useFetch for data fetching (handles SSR)useState for SSR-safe reactive statedefinePageMeta for page-level config