Vue Frontend Expert

Vue Frontend Expert (Vue 3 / Nuxt 3)

English | Bahasa Indonesia

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and project-context-mapper 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.

<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.

// 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 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).

Bahasa Indonesia

Integrasi Orkestrasi

Terhubung dan mengorkestrasi skill domain yang relevan seperti brainstorming, zero-to-prod-orchestrator, dan project-context-mapper 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.
• VueUse: Jangan menulis fungsi utilitas dari nol jika sudah ada di library VueUse (contoh: useIntersectionObserver, useLocalStorage).