A comprehensive developer guide for building high-performance Vue 3 applications with Server-Side Rendering and efficient data fetching patterns.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install nuxt
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install nuxt using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Nuxt 3 Development?
The Nuxt skill provides a robust architectural framework for building modern web applications using Vue 3. It addresses critical development challenges such as hydration mismatches, cross-environment state management, and optimized data fetching. By integrating these patterns into your workflow via Openclaw Skills, you gain access to industry-standard practices for creating scalable, SEO-friendly applications that perform seamlessly across both server and client environments.
This skill emphasizes the use of Nuxt-specific composables like useFetch and useState to ensure SSR safety and prevent common pitfalls such as double-fetching or browser-API crashes. It streamlines project organization through auto-imports and provides a structured approach to building full-stack applications with integrated Nitro server routes, middleware, and flexible configuration management.
Nuxt 3 Development Use Cases
- Building SEO-optimized web applications using Server-Side Rendering (SSR).
- Developing high-performance static websites with Static Site Generation (SSG) or Incremental Static Regeneration (ISR).
- Creating full-stack applications with integrated API routes and server-side logic.
- Managing shared state safely between the server and client without hydration errors.
- Implementing global or route-specific navigation guards and authentication checks.
How Nuxt 3 Development Works
- The skill utilizes a structured directory pattern where components, composables, and server utilities are automatically imported to reduce boilerplate.
- Data fetching is handled through useFetch or useLazyFetch, which optimizes requests by caching results during the server-side rendering phase.
- State is managed using the useState composable to ensure data persists across client-side navigation while remaining environment-agnostic.
- Server-side functionality is defined within the server/ directory, allowing for the creation of method-specific API handlers (GET, POST, etc.) and server middleware.
- Configuration is split between runtimeConfig for environment-sensitive secrets and app.config for reactive, build-time constants.
- The application lifecycle is managed through a plugin system that runs before the app is created, allowing for custom injections and logic hooks.
Nuxt 3 Development Setup
To get started with this skill in your development environment, ensure you have Node.js installed. You can initialize a new project and manage it using Openclaw Skills patterns.
# Initialize a new Nuxt project
npx nuxi@latest init <project-name>
# Install dependencies
npm install
# Start the development server with hot-module replacement
npm run dev
Nuxt 3 Development Data Schema & Taxonomy
The skill organizes application data and logic through a strict directory-based taxonomy:
| Directory | Asset Type | Behavior |
|---|---|---|
components/ |
Vue Components | Auto-imported using folder-based naming (e.g., UI/Button -> <UIButton>) |
composables/ |
Logic & State | Auto-imported; must use use* naming convention |
server/api/ |
API Routes | Files become endpoints; use .get.ts or .post.ts suffixes |
middleware/ |
Route Guards | .global.ts runs on every route; others are page-specific |
plugins/ |
App Extensions | Runs before app creation; supports .client and .server suffixes |
server/utils/ |
Server Helpers | Auto-imported only within server-side routes |
Nuxt 3 Development Advanced Features
- Incremental Static Regeneration (ISR) support via routeRules for hourly or on-demand cache updates.
- Type-safe SEO management using useSeoMeta for automatic OG and Twitter tag generation.
- Hybrid rendering modes allowing per-route configuration for pre-rendering, SSR, or SPA behavior.
- Advanced error handling with createError for server-side redirection and status code management.
- Environment variable integration using the NUXT_ prefix for seamless runtime configuration overrides.
SKILL.md
Loading
Related Openclaw Skills
Nutritionist
A holistic nutrition agent designed to guide users toward sustainable eating habits and a healthier relationship with food.
NumPy
A high-performance numerical computing skill for writing fast, memory-efficient Python code using arrays and vectorization.
Notion Calendar
An AI-powered skill for managing Notion databases as calendars with date-aware search, automated page creation, and safe rescheduling workflows.
Notify - Smart Notification Delivery
A logic-driven framework for AI agents to deliver the right message through the right channel at the right time while avoiding user fatigue.
OAuth & OpenID Connect Security
A comprehensive security framework for implementing industry-standard OAuth 2.0 and OpenID Connect flows in modern applications.
Office
A comprehensive skill set for mastering Microsoft 365, Google Workspace, and office administration through AI-driven automation and expert workflows.
Featured*
