vue-3

Vue 3 Best Practices

Overview

Aspect	Recommendation
API Style	Composition API with <script setup>
State Management	Pinia
Language	TypeScript
Build Tool	Vite

---

Script Setup (Recommended)

✅ DO: Use <script setup> syntax

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

// Props
const props = defineProps<{
  user: User
  showEmail?: boolean
}>()

// Emits
const emit = defineEmits<{
  (e: 'update', value: string): void
  (e: 'delete'): void
}>()

// Reactive state
const count = ref(0)
const doubled = computed(() => count.value * 2)

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

<template>
  <div>
    <h2>{{ user.name }}</h2>
    <p v-if="showEmail">{{ user.email }}</p>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

---

Props and Emits

Props with Defaults

<script setup lang="ts">
interface Props {
  title: string
  count?: number
  items?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  count: 0,
  items: () => []
})
</script>

Typed Emits

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update:modelValue', value: string): void
}>()

function handleChange(id: number) {
  emit('change', id)
}
</script>

---

Reactivity

ref vs reactive

import { ref, reactive } from 'vue'

// ✅ Use ref for primitives
const count = ref(0)
const name = ref('')

// ✅ Use reactive for objects (optional)
const state = reactive({
  users: [],
  loading: false
})

// ✅ Access ref values with .value in script
count.value++

// Template auto-unwraps refs
// <span>{{ count }}</span>  ← No .value needed

Computed Properties

<script setup lang="ts">
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// Read-only computed
const fullName = computed(() => `${firstName.value} ${lastName.value}`)

// Writable computed
const fullNameWritable = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (value: string) => {
    const [first, last] = value.split(' ')
    firstName.value = first
    lastName.value = last
  }
})
</script>