web-vue

Purpose

This skill provides tools for building modern Vue 3 applications using the Composition API for reactive logic, Pinia for state management, Vue Router 4 for navigation, Single File Components (SFCs) for modular development, Vite for fast bundling, and Nuxt 3 for server-side rendering and SEO optimization.

When to Use

Use this skill for creating interactive web apps with reactive UIs, such as dashboards, e-commerce sites, or single-page applications (SPAs). Apply it when you need efficient state handling, routing, or SSR, especially in projects requiring quick development cycles with Vite.

Key Capabilities

• Composition API: Use setup() in SFCs for reactive variables, e.g., const count = ref(0); to create a reactive number.
• Pinia: Define stores with defineStore('main', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } }) for global state.
• Vue Router 4: Set up routes via createRouter({ history: createWebHistory(), routes: [{ path: '/', component: Home }] }).
• SFCs: Structure components in .vue files with <script setup>, <template>, and <style> sections.
• Vite: Build projects with vite build --mode production for optimized outputs.
• Nuxt 3: Enable SSR with nuxi generate for static site generation from Vue apps.