From atum-stack-web
Provides Nuxt 4 patterns for hydration safety, SSR-safe data fetching with useFetch/useAsyncData, route rules for prerender/SWR/ISR, lazy loading, and performance optimization.
npx claudepluginhub arnwaldn/atum-plugins-collection --plugin atum-stack-webThis skill uses the workspace's default tool permissions.
Use when building or debugging Nuxt 4 apps with SSR, hybrid rendering, route rules, or page-level data fetching.
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.
Searches, 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.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
Use when building or debugging Nuxt 4 apps with SSR, hybrid rendering, route rules, or page-level data fetching.
useFetch, useAsyncData, or $fetchDate.now(), Math.random(), browser-only APIs, or storage reads directly into SSR-rendered template state.onMounted(), import.meta.client, ClientOnly, or a .client.vue component when the server cannot produce the same markup.useRoute() composable, not the one from vue-router.route.fullPath to drive SSR-rendered markup. URL fragments are client-only, which can create hydration mismatches.ssr: false as an escape hatch for truly browser-only areas, not a default fix for mismatches.await useFetch() for SSR-safe API reads in pages and components. It forwards server-fetched data into the Nuxt payload and avoids a second fetch on hydration.useAsyncData() when the fetcher is not a simple $fetch() call, when you need a custom key, or when you are composing multiple async sources.useAsyncData() a stable key for cache reuse and predictable refresh behavior.useAsyncData() handlers side-effect free. They can run during SSR and hydration.$fetch() for user-triggered writes or client-only actions, not top-level page data that should be hydrated from SSR.lazy: true, useLazyFetch(), or useLazyAsyncData() for non-critical data that should not block navigation. Handle status === 'pending' in the UI.server: false only for data that is not needed for SEO or the first paint.pick and prefer shallower payloads when deep reactivity is unnecessary.const route = useRoute()
const { data: article, status, error, refresh } = await useAsyncData(
() => `article:${route.params.slug}`,
() => $fetch(`/api/articles/${route.params.slug}`),
)
const { data: comments } = await useFetch(`/api/articles/${route.params.slug}/comments`, {
lazy: true,
server: false,
})
Prefer routeRules in nuxt.config.ts for rendering and caching strategy:
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true },
'/products/**': { swr: 3600 },
'/blog/**': { isr: true },
'/admin/**': { ssr: false },
'/api/**': { cache: { maxAge: 60 * 60 } },
},
})
prerender: static HTML at build timeswr: serve cached content and revalidate in the backgroundisr: incremental static regeneration on supported platformsssr: false: client-rendered routecache or redirect: Nitro-level response behaviorPick route rules per route group, not globally. Marketing pages, catalogs, dashboards, and APIs usually need different strategies.
Lazy prefix to dynamically import non-critical components.v-if so the chunk is not loaded until the UI actually needs it.<template>
<LazyRecommendations v-if="showRecommendations" />
<LazyProductGallery hydrate-on-visible />
</template>
defineLazyHydrationComponent() with a visibility or idle strategy.NuxtLink for internal navigation so Nuxt can prefetch route components and generated payloads.useFetch or useAsyncData, not top-level $fetch