git:20260913.4cedcda to v3.0.0

+ ---

+ name: vue-frontend-expert

+ description: "Expert guide for Vue 3 (Composition API), Nuxt 3, and Pinia. Covers advanced reactive state management, `<script setup>` syntax, Vue Router, VueUse, and SPA/SSR architectural patterns in English and Indonesian."

+ author: "Roedy Rustam"

+ version: "3.0.0"

+ ---

+

+ # Vue Frontend Expert (Vue 3 / Nuxt 3)

+

+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

+

+ ---

+

+ <a name="english"></a>

+ ## English

+

+ ### Orchestration & Integration

+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.

+

+ ### Description

+ Production-grade guidance for building highly reactive and scalable frontend applications using **Vue 3 (Composition API)** and **Nuxt 3**. Covers the latest ecosystem tools including **Pinia** for state management, **VueUse** for composables, and **Tailwind CSS v4** integration.

+

+ ### Trigger Conditions

+ Activate this skill when the user is:

+ - Scaffolding a new Vue 3 or Nuxt 3 project.

+ - Writing or refactoring Vue components using `<script setup>` and Composition API.

+ - Managing global state with Pinia.

+ - Handling client-side routing with Vue Router or Nuxt's file-based routing.

+ - Implementing SSR (Server-Side Rendering) or SSG (Static Site Generation) using Nuxt 3.

+

+ ---

+

+ ### Core Concepts

+

+ #### 1. Vue 3 Composition API & `<script setup>`

+ Use the `<script setup>` syntax by default. It provides better type inference, less boilerplate, and superior performance compared to the Options API.

+

+ ```vue

+ <script setup lang="ts">

+ import { ref, computed, onMounted } from 'vue'

+

+ const count = ref(0)

+ const doubleCount = computed(() => count.value * 2)

+

+ function increment() {

+ count.value++

+ }

+

+ onMounted(() => {

+ console.log('Component is mounted!')

+ })

+ </script>

+

+ <template>

+ <button @click="increment">Count is: {{ count }} (Double: {{ doubleCount }})</button>

+ </template>

+ ```

+

+ #### 2. Global State Management (Pinia)

+ Pinia is the official state management library for Vue. Avoid Vuex in modern applications.

+

+ ```typescript

+ // stores/counter.ts

+ import { defineStore } from 'pinia'

+ import { ref, computed } from 'vue'

+

+ export const useCounterStore = defineStore('counter', () => {

+ const count = ref(0)

+ const doubleCount = computed(() => count.value * 2)

+ function increment() {

+ count.value++

+ }

+

+ return { count, doubleCount, increment }

+ })

+ ```

+

+ #### 3. Nuxt 3 Architecture

+ For SSR, SEO optimization, and file-based routing, use Nuxt 3.

+ - Data fetching: Use `useAsyncData` or `useFetch` to prevent hydration mismatches.

+ - Server API: Utilize the `server/api/` directory for Nitro API routes.

+

+ #### 4. The VueUse Collection

+ Always leverage [VueUse](https://vueuse.org/) for common composables (e.g., `useWindowSize`, `onClickOutside`, `useStorage`) instead of writing custom composables from scratch.

+

+ ---

+

+ ### Best Practices

+ 1. **Ref vs Reactive:** Prefer `ref` for primitive values and `reactive` for deeply nested objects. When in doubt, default to `ref`.

+ 2. **Define Macros:** Use `defineProps` and `defineEmits` in `<script setup>` for typed props and events.

+ 3. **Avoid Watchers when possible:** Rely on `computed` properties instead of `watch` to derive state. Use `watch` only for side-effects (e.g., API calls, DOM manipulation).

+ 4. **V-Model:** Use the updated `v-model` binding in Vue 3.4+ with `defineModel()` for cleaner two-way data binding between components.

+

+ ---

+

+ ### Integration with Other Skills (MANDATORY)

+

+ This skill works best when combined with:

+ - `design-system-architect` — To build headless UI components using Radix Vue or VueUse components.

+ - `tailwind-expert` — For styling Vue/Nuxt components with Tailwind CSS v4.

+ - `performance-web-vitals` — To optimize Nuxt 3 SSR metrics (LCP, INP).

+

+ ### Referenced By Orchestrators (MANDATORY)

+

+ This skill should be referenced by the following orchestrators:

+ - `brainstorming` — Add to "Frontend Frameworks" row in the Matrix.

+ - `zero-to-prod-orchestrator` — Phase 5 (Frontend Implementation).

+

+ ---

+

+ <a name="bahasa-indonesia"></a>

+ ## Bahasa Indonesia

+

+ ### Integrasi Orkestrasi

+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.

+

+ ### Deskripsi

+ Panduan tingkat produksi untuk membangun aplikasi frontend reaktif dan terukur menggunakan **Vue 3 (Composition API)** dan **Nuxt 3**. Mencakup pengelolaan state dengan **Pinia**, utilitas **VueUse**, dan integrasi **Tailwind CSS v4**.

+

+ ### Kondisi Pemicu

+ Aktifkan skill ini ketika pengguna sedang:

+ - Memulai proyek Vue 3 atau Nuxt 3 baru.

+ - Menulis ulang (refactoring) komponen ke `<script setup>` dan Composition API.

+ - Mengelola state global dengan Pinia (bukan Vuex).

+ - Menerapkan SSR (Server-Side Rendering) dengan Nuxt 3.

+

+ ### Panduan Singkat

+

+ - **Composition API Default:** Selalu gunakan sintaks `<script setup lang="ts">`. Lebih ringkas, type-safe, dan efisien.

+ - **Pinia:** Gunakan Pinia dengan pola *Setup Store* (mirip Composition API) alih-alih pola Options (state, getters, actions).

+ - **Nuxt 3 Fetching:** Gunakan `useFetch` atau `useAsyncData` di dalam komponen Nuxt untuk pengambilan data saat SSR, bukan `onMounted` dengan `fetch` biasa.

+ - **Reaktivitas:** Gunakan `ref` untuk nilai primitif (string, number) dan `reactive` untuk objek bersarang yang kompleks. Utamakan `computed` daripada `watch` untuk state turunan.