| name | web-vue |
| description | Vue 3: Composition API script setup, Pinia, Vue Router 4, SFCs, Vite, Nuxt 3 Use when this capability is needed. |
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.
Usage Patterns
To create a reactive counter component, import ref from Vue and use it in <script setup>:
<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template><button @click="increment">{{ count }}</button></template>
