Vue Best Practices

# npm
npm create vue@latest
cd <your-project-name>
npm install
npm run dev

# pnpm
pnpm create vue@latest
cd <your-project-name>
pnpm install
pnpm run dev

# yarn
yarn create vue@latest
cd <your-project-name>
yarn
yarn dev

# npm
npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install
npm run dev

# pnpm
pnpm create vite my-vue-app --template vue-ts
cd my-vue-app
pnpm install
pnpm run dev

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

// Reactive state
const count = ref(0)
const message = ref('Hello')

// Computed
const doubled = computed(() => count.value * 2)

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

// Lifecycle
onMounted(() => {
  console.log('Component mounted')
})
</script>

<template>
  <div>
    <p>{{ message }} {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

import { reactive } from 'vue'

// Object reactivity
const state = reactive({
  count: 0,
  user: {
    name: 'Alice',
    age: 30
  }
})

// Modify
state.count++
state.user.name = 'Bob'

import { defineProps, PropType } from 'vue'

interface User {
  id: number
  name: string
  email: string
}

const props = defineProps<{
  title: string
  users: User[]
  onSave: (user: User) => void
}>()

<script setup lang="ts">
// 1. Imports
import { ref } from 'vue'
import BaseButton from '@/components/BaseButton.vue'

// 2. Props and Emits
const props = defineProps<{ title: string }>()
const emit = defineEmits<{ (e: 'submit'): void }>()

// 3. Reactive state
const loading = ref(false)

// 4. Computed
const isValid = computed(() => props.title.length > 0)

// 5. Methods
async function handleSubmit() {
  loading.value = true
  try {
    emit('submit')
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <!-- Template -->
</template>

<style scoped>
/* Component styles */
</style>

// stores/user.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
  // State
  const users = ref<User[]>([])
  const currentUser = ref<User | null>(null)

  // Computed
  const userCount = computed(() => users.value.length)
  const isLoggedIn = computed(() => currentUser.value !== null)

  // Actions
  async function fetchUsers() {
    const response = await api.get('/users')
    users.value = response.data
  }

  async function login(credentials: Credentials) {
    const response = await api.post('/login', credentials)
    currentUser.value = response.data
  }

  function logout() {
    currentUser.value = null
  }

  return {
    users,
    currentUser,
    userCount,
    isLoggedIn,
    fetchUsers,
    login,
    logout
  }
})

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/users/:id',
    name: 'UserDetail',
    component: () => import('@/views/UserDetail.vue'),
    props: true
  },
  {
    path: '/admin',
    component: () => import('@/views/Admin.vue'),
    meta: { requiresAuth: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// Navigation guard
router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return '/login'
  }
})

export default router

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// Get params
const userId = route.params.id

// Navigate
router.push('/dashboard')
</script>

// composables/useFetch.ts
import { ref, onMounted } from 'vue'

export function useFetch<T>(url: string) {
  const data = ref<T | null>(null)
  const loading = ref(false)
  const error = ref<Error | null>(null)

  async function fetchData() {
    loading.value = true
    error.value = null
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (e) {
      error.value = e as Error
    } finally {
      loading.value = false
    }
  }

  onMounted(fetchData)

  return { data, loading, error, refetch: fetchData }
}

<!-- Static import -->
<script setup>
import HeavyComponent from './HeavyComponent.vue'
</script>

<!-- Dynamic import (lazy) -->
<script setup>
import { defineAsyncComponent } from 'vue'

const HeavyComponent = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
)
</script>

<style scoped>
.button {
  padding: 8px 16px;
  border-radius: 4px;
}

/* Deep selector */
:deep(.el-input) {
  border: none;
}
</style>

<style scoped>
:root {
  --primary-color: #42b983;
  --button-padding: 8px 16px;
}

.button {
  background: var(--primary-color);
  padding: var(--button-padding);
}
</style>

// components/Button.spec.ts
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Button from './Button.vue'

describe('Button', () => {
  it('renders with correct text', () => {
    const wrapper = mount(Button, {
      props: { label: 'Click me' }
    })
    expect(wrapper.text()).toContain('Click me')
  })

  it('emits click event', async () => {
    const wrapper = mount(Button, {
      props: { label: 'Click me' }
    })
    await wrapper.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('click')
  })
})