Nuxt Best Practices

The nuxt-best-practices skill ensures AI agents adhere to the official Vue.js and Nuxt.js coding standards, optimizing application performance and maintainability. It automatically enforces strict linting rules, component structure guidelines, and build optimization strategies specific to the Nuxt ecosystem.

When to use it

• Generating new Nuxt components that strictly follow the recommended folder structure and naming conventions.
• Refactoring existing Vue codebases to align with Nuxt 3's latest architectural patterns and best practices.
• Ensuring AI-generated code passes standard linters like ESLint and Prettier without manual configuration adjustments.
• Optimizing build configurations for production deployments to reduce bundle size and improve load times.

Key capabilities

• Enforces strict adherence to Vue.js and Nuxt.js official documentation standards.
• Applies automated linting rules specific to the Nuxt ecosystem.
• Structures components according to best-practice architectural patterns.
• Optimizes build configurations for performance and scalability.

Example prompts

• "Generate a new dashboard component using Nuxt 3, ensuring it follows all official best practices for layout and state management."
• "Refactor this legacy Vue file into a modern Nuxt module, applying the latest coding standards and linting rules."
• "Optimize my current Nuxt build configuration to reduce bundle size while maintaining full functionality."

Tips & gotchas

Ensure your project is initialized with the latest version of Nuxt before applying these practices, as older versions may not support all enforced rules. This skill focuses on coding standards; it does not replace the need for manual performance testing in complex production environments.