Migration Migrate Component

Migrate a Nuxt component from Nuxt 2 / Options API to Nuxt 3 ` following docs/ARCHITECTURE.md` section 5.

Component: $ARGUMENTS

Steps

1. Read docs/ARCHITECTURE.md section 5.

1. Analyze the component:

• Count lines (template, script, style)
• List: props, emits, data, computed, watch, methods, mixins, asyncData, fetch
• Map who imports this component

1. Convert to ``:

• props -> defineProps()
• emits -> defineEmits()
• data() -> ref() / reactive()
• computed: -> computed()
• watch: -> watch()
• methods: -> function
• mounted() -> onMounted()
• mixins: [] -> extract to composable useXxx()
• asyncData() -> useAsyncData()
• fetch() -> useFetch()
• $axios -> $fetch
• this.$route -> useRoute()
• this.$router -> useRouter()
• this.$store -> useState() / Pinia
• Remove explicit imports (use auto-imports)

1. Apply composition pattern if there is prop drilling.

1. Decompose if > 200 lines.

1. Validate:

nuxi typecheck
nuxi build
npx vitest run --passWithNoTests

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: HerbertJulio
• Source: HerbertJulio/specialist-agent
• License: MIT
• Homepage: https://specialistagent.com.br

Install and usage instructions live in the source repository linked above.