convert-vue-nextjs

Convert Vue 2/3 or Nuxt components to Next.js App Router with React.

11|Updated Mar 8, 2026
One-click install
npx skills add https://github.com/yigitkonur/skills-by-yigitkonur --skill convert-vue-nextjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: convert-vue-nextjs
Source: https://github.com/yigitkonur/skills-by-yigitkonur/tree/main/skills/convert-vue-nextjs
Command: npx skills add https://github.com/yigitkonur/skills-by-yigitkonur --skill convert-vue-nextjs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the complex process of converting Vue.js or Nuxt.js applications and components into idiomatic Next.js App Router code, ensuring functional parity and leveraging modern React patterns.

Core Features & Use Cases

  • Component Conversion: Transforms Vue SFCs (.vue) into React components.
  • State & Routing Migration: Guides conversion of Pinia/Vuex stores and Vue Router configurations.
  • SSR & Ecosystem Mapping: Addresses Nuxt SSR patterns and maps Vue libraries to React equivalents.
  • Use Case: You have a large Nuxt 3 application and need to migrate it to Next.js to leverage React Server Components and the Next.js ecosystem. This Skill provides the patterns and guidance to perform the conversion systematically.

Quick Start

Use the convert-vue-nextjs skill to convert the attached Vue component 'UserProfile.vue' into a Next.js App Router compatible React component.

Frequently Asked Questions about convert-vue-nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate a Vue component to Next.js App Router?

To migrate a Vue component to Next.js App Router, convert Vue SFCs into React components by mapping template directives, slots, and emits to JSX and React hooks, ensuring functional parity while leveraging modern React patterns.

How do I convert Pinia or Vuex stores to React?

Converting Pinia or Vuex stores to React involves migrating state management logic to Zustand or Redux, mapping Vue reactivity, computed properties, and watchers to equivalent React hooks and context patterns.

What is the best way to migrate Nuxt SSR patterns to Next.js?

Migrating Nuxt SSR patterns to Next.js requires mapping Nuxt data fetching techniques to React Server Components or client-side fetching patterns within the Next.js App Router architecture.

Can I convert Vue Router configurations to Next.js routing?

Yes, Vue Router configurations can be converted to Next.js routing by mapping dynamic routes and navigation guards to the Next.js App Router file-based routing system and client-side navigation APIs.

Does Vue 2 migration to Next.js support mapping template directives to React?

Vue 2 migration to Next.js supports mapping template directives, slots, emits, and computed properties to React hooks, context, and JSX, ensuring idiomatic React code while maintaining component functionality.

What are the limitations of converting Vue reactivity to React hooks?

Converting Vue reactivity to React hooks requires careful mapping of watchers and computed properties to useEffect and useMemo, handling deep reactivity differences and lifecycle hook timing discrepancies.