Frontend Vue

Vue Development Skill

Comprehensive skill for modern Vue.js development, focusing on Nuxt 3, Vue 3 Composition API, Tailwind CSS, and the Vue ecosystem.

Technology Stack

Core Framework: Vue 3 + Nuxt 3

Vue 3 Features

• Composition API: Logic reuse with <script setup>
• Reactivity System: ref, reactive, computed, watch
• Teleport: Rendering content outside the component DOM hierarchy
• Fragments: Multiple root nodes support
• Suspense: Handling async dependencies

Nuxt 3 Features

• Auto-imports: Automatically imports Vue APIs and component components
• File-based Routing: Pages in pages/ directory create routes
• Server Engine (Nitro): Universal deployment
• Data Fetching: useFetch, useAsyncData
• Server Routes: API endpoints in server/api/
• SEO/Meta: useHead, useSeoMeta

UI Framework: Tailwind CSS + shadcn-vue

Tailwind CSS

• Utility-first architecture
• Configured via tailwind.config.ts
• Optimized with PostCSS

shadcn-vue (or similar)

• Vue port of shadcn/ui
• Accessible components based on Radix Vue
• Key Components: Button, Input, Select, Dialog, Toast

State Management

• Pinia: The official state management library for Vue
  • Modular stores
  • TypeScript support
  • DevTools integration
  • No mutations (only actions)

Project Architecture

Recommend Directory Structure (Nuxt 3)

project-root/
├── app.vue            # Root component
├── nuxt.config.ts     # Configuration
├── components/        # Auto-imported components
│   ├── ui/            # UI library components
│   │   ├── button/
│   │   └── ...
│   └── Header.vue
├── pages/             # Routes
│   ├── index.vue
│   └── about.vue
├── layouts/           # Layout wrappers
│   └── default.vue
├── composables/       # Auto-imported logic
│   └── useUser.ts
├── server/            # Server API
│   └── api/
│       └── hello.ts
├── stores/            # Pinia stores
│   └── counter.ts
└── assets/            # CSS, images
    └── main.css

Best Practices

Composition API with <script setup>

• Use const for reactive variables.
• Keep logic organized by feature.
• Extract complex logic into composables (composables/).

Performance

• Async Components: Use defineAsyncComponent for lazy loading.
• Lazy Fetching: Use lazy: true option in useFetch for non-critical data.
• Asset Optimization: Use Nuxt Image for image optimization.

Nuxt Specifics

• Hydration Mismatch: Ensure HTML rendered on server matches client. Avoid random IDs or dates during initial render.
• Middleware: Use Route Middleware for auth guards (middleware/auth.ts).

Common Code Patterns

Nuxt Page with Data Fetching

<script setup lang="ts">
const { data: user, error } = await useFetch('/api/user/1')

if (error.value) {
  console.error(error.value)
}
</script>

<template>
  <div v-if="user" class="p-4">
    <h1 class="text-2xl font-bold">{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
  <div v-else>Loading...</div>
</template>

Pinia Store

// stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

Composable

// composables/useMouse.ts
export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}