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 }
})