Nuxt

What This Skill Does

The Nuxt skill enables OpenClaw to architect, debug, and implement robust Vue 3 applications using the Nuxt framework. It provides deep architectural knowledge regarding Nuxt's unique lifecycle, including Server-Side Rendering (SSR) and Static Site Generation (SSG). The skill helps manage complex data fetching patterns, prevents common hydration errors, enforces proper state management via useState and Pinia, and ensures server routes are structured correctly. Whether you are migrating a legacy Vue app or starting a greenfield project, this skill ensures your codebase follows Nuxt 3 best practices.

Installation

To integrate this skill into your agent, run the following command in your terminal: clawhub install openclaw/skills/skills/ivangdavila/nuxt

Use Cases

• SSR Debugging: Solving hydration mismatches where the server and client render differently.
• Data Fetching Strategy: Choosing between useFetch for component data and $fetch for server-side logic.
• Middleware Orchestration: Setting up authentication guards or global navigation hooks.
• Server-Side API Development: Creating secure, method-specific server endpoints within the server/api/ directory.
• Performance Optimization: Implementing useLazyFetch to prevent navigation blocking and improve perceived load times.

Example Prompts

1. "Analyze my code: I'm getting a hydration mismatch error when using Date.now() inside a template, how should I refactor this?"
2. "Show me how to structure a secure API route in server/api/ that handles a POST request and validates the body payload."
3. "Help me convert my global ref() state into useState so that my user preferences persist correctly across navigation without being reset by the server."

Tips & Limitations

• Auto-imports: Always ensure composables are prefixed with use to trigger auto-importing. Do not rely on importing utilities from files not following this convention.
• Hydration: Never use browser-specific APIs like window or localStorage directly in your component setup. Always wrap them in onMounted or check process.client to avoid server-side crashes.
• Caching: When using useFetch with dynamic URL parameters, you must provide a unique key to prevent the cache from returning data from a previous route navigation.
• Navigation: When using navigateTo() inside middleware, remember to return the function call, otherwise the agent will proceed to the original route anyway.