vue

Modernize Vue.js architecture, state, routing, rendering, and tests.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides structured guidance to design, migrate, optimize, and test Vue.js applications so teams avoid architectural drift, runtime regressions, and poor performance from inconsistent patterns.

Core Features & Use Cases

  • Architecture & Migration: Advice for choosing Composition API vs Options API, incremental migration plans from Vue 2 to Vue 3, and Nuxt adoption strategies.
  • State, Routing & Rendering: Patterns for Pinia stores, lazy-loaded Vue Router routes, and per-route Nuxt SSR/SSG/ISR rendering strategies.
  • Developer Experience & Quality: TypeScript typing conventions, composable patterns, testing and CI gates, bundle budgeting, and performance targets for production apps.

Quick Start

Use the Vue skill to assess a project and produce a migration and optimization plan that enforces Composition API, Pinia stores, lazy routes, TypeScript typing, and test/type-gate requirements.

Frequently Asked Questions about vue

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

FAQPage Schema
How do I migrate a Vue 2 application to Vue 3 and the Composition API?

Vue migration from version 2 to 3 requires an incremental plan enforcing Composition API patterns, Pinia state management, TypeScript typing conventions, and automated test gates for production readiness.

What is the best way to structure Pinia stores and Vue Router routes?

The best way to structure Pinia stores and Vue Router routes is to follow conventions that use lazy-loaded routes and defined store patterns, ensuring optimized state management and rendering for Vue applications.

Does this Vue optimization approach work with Nuxt SSR and SSG sites?

Yes, this Vue optimization approach works with Nuxt SSR and SSG sites by applying per-route rendering strategies, ensuring type safety, and enforcing bundle size budgets across server-side and statically generated pages.

How do I configure CI test and type-check workflows for a Vue project?

To configure CI workflows for a Vue project, set up automated type and test gates that enforce TypeScript typing conventions and validate component refactors before deployment to prevent runtime regressions.

Composition API vs Options API: which should I choose for my Vue app?

Choose Composition API over Options API for modern Vue apps to enforce TypeScript typing, utilize composable patterns, and prevent architectural drift, ensuring better type safety and production readiness.

What are the limitations when refactoring large Vue.js applications?

When refactoring large Vue.js applications, limitations arise from architectural drift and runtime regressions caused by inconsistent patterns, requiring strict enforcement of bundle size budgets and automated type gates.