Does this skill support Nuxt 2 to Nuxt 3 migration?

Yes, it specifically identifies outdated patterns and provides refactored equivalents using the Nuxt 3 Composition API and modern directory structures.

Does it work with existing Pinia stores?

Yes, it can refactor existing state logic into modular Pinia stores or identify where global state should be replaced with local composables.

How does it improve application performance?

It optimizes data fetching by correctly implementing useFetch/useAsyncData, reduces bundle sizes by extracting logic, and ensures efficient SSR hydration.

Can it help with Nitro server-side logic?

Absolutely. It can refactor server routes, implement typed API handlers, and organize server utilities within the Nitro engine.

Nuxt.js Refactoring Expert

Name: Nuxt.js Refactoring Expert
Author: SnakeO

bySnakeO

Developer Tools

Refactors Nuxt.js and Vue.js codebases to improve maintainability, performance, and adherence to Nuxt 3 best practices.

About

This skill serves as an elite architectural guide for modernizing Nuxt.js applications. It systematically identifies and resolves technical debt by applying Single Responsibility Principles (SRP), DRY logic extraction, and modern Vue Composition API patterns. From optimizing complex data fetching with useFetch and useAsyncData to organizing Nitro server routes and Nuxt Layers, this skill ensures your codebase is type-safe, performance-optimized, and follows the latest modular standards. It is particularly useful for breaking down monolithic components into reusable composables and ensuring SSR-safe state management with Pinia or useState.

Key Features

Restructures applications using Nuxt Layers for superior modularity and domain-driven design.
Refactors state management to utilize Pinia and SSR-safe useState patterns correctly.
Implements full TypeScript integration across components, composables, and Nitro routes.
0 GitHub stars
Extracts business logic from components into single-responsibility composables and utilities.
Optimizes data fetching patterns to prevent double-fetching and improve hydration performance.

Use Cases

Fixing performance bottlenecks caused by improper use of $fetch in SSR contexts.
Breaking down oversized 'spaghetti' components into focused, maintainable sub-components.
Modernizing legacy Nuxt/Vue code into high-quality Nuxt 3 Composition API patterns.

About

Key Features

Restructures applications using Nuxt Layers for superior modularity and domain-driven design.
Refactors state management to utilize Pinia and SSR-safe useState patterns correctly.
Implements full TypeScript integration across components, composables, and Nitro routes.
0 GitHub stars
Extracts business logic from components into single-responsibility composables and utilities.
Optimizes data fetching patterns to prevent double-fetching and improve hydration performance.

Use Cases

Fixing performance bottlenecks caused by improper use of $fetch in SSR contexts.
Breaking down oversized 'spaghetti' components into focused, maintainable sub-components.
Modernizing legacy Nuxt/Vue code into high-quality Nuxt 3 Composition API patterns.