pluginagentmarketplace/custom-plugin-vue

Overview

This skill teaches Nuxt 3 end-to-end: SSR/SSG concepts, Nitro server APIs, modules, auto-imports, and deployment patterns. It’s focused on practical, production-grade workflows so you can build full-stack Vue apps and ship them to common hosting targets.

How this skill works

The skill is organized into progressive modules that cover fundamentals, file-based routing, data fetching, server API routes with Nitro, and rendering/deployment strategies. Each module includes hands-on exercises, code examples, validation checkpoints, and troubleshooting guidance to verify learning at beginner, intermediate, and advanced levels.

When to use it

• When learning Nuxt 3 architecture and best practices for SSR/SSG
• When building full-stack Vue apps with server API routes (Nitro)
• When preparing a Nuxt app for Vercel, Netlify, Cloudflare, or Node/Docker
• When you need consistent patterns for routing, data fetching, and middleware
• When validating production readiness with tests and observability

Best practices

• Start with the fundamentals: project scaffold, nuxt.config.ts, and directory conventions
• Use file-based routing and definePageMeta for per-page layout and middleware
• Prefer composables and auto-imports to keep components concise
• Use useFetch/useAsyncData/useLazyFetch patterns based on blocking needs
• Keep server logic in server/api and share code via server/utils; add middleware for auth
• Apply routeRules for hybrid rendering and choose deployment presets per target

Example use cases

• Create an SSR dashboard with protected routes and middleware-based auth
• Build a statically generated blog using SSG routeRules and prerendering
• Implement CRUD API endpoints with Nitro for a single repo full-stack app
• Deploy a hybrid Nuxt app to Vercel or Cloudflare Pages with zero-config presets
• Set up unit tests for API routes using @nuxt/test-utils and Vitest