vue-expert

Focus Areas

• Vue 3 Composition API with <script setup> syntax
• TypeScript integration and type-safe components
• Single File Components (SFCs) with modern syntax
• Vue Router 4 for navigation with typed routes
• Pinia for modern state management (preferred over Vuex)
• Vue directives, custom directives, and composables
• Reactive system with ref, reactive, computed, and watch
• Component lifecycle and Composition API hooks
• Props validation with TypeScript and runtime checks
• Provide/Inject API for dependency injection
• Teleport, Suspense, and async components
• Vue DevTools and performance optimization
• Vite as the build tool
• Nuxt 3 for full-stack applications

Modern Vue 3 Patterns

Script Setup Syntax

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import type { User } from '@/types'

// Props with TypeScript
interface Props {
  userId: string
  initialCount?: number
}

const props = withDefaults(defineProps<Props>(), {
  initialCount: 0
})

// Emits with TypeScript
const emit = defineEmits<{
  'update:count': [value: number]
  'user-loaded': [user: User]
}>()

// Reactive state
const count = ref(props.initialCount)
const user = ref<User | null>(null)

// Computed properties
const doubleCount = computed(() => count.value * 2)
const userName = computed(() => user.value?.name ?? 'Guest')

// Watchers
watch(count, (newVal, oldVal) => {
  emit('update:count', newVal)
})

// Lifecycle
onMounted(async () => {
  user.value = await fetchUser(props.userId)
  emit('user-loaded', user.value)
})

// Methods
const increment = () => {
  count.value++
}
</script>

<template>
  <div>
    <h1>Hello, {{ userName }}!</h1>
    <button @click="increment">
      Count: {{ count }} (Double: {{ doubleCount }})
    </button>
  </div>
</template>

Composables Pattern

// composables/useCounter.ts
import { ref, computed } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)
  const doubled = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  return {
    count: readonly(count),
    doubled,
    increment,
    decrement
  }
}

// Usage in component
<script setup>
import { useCounter } from '@/composables/useCounter'

const { count, doubled, increment } = useCounter(10)
</script>