Vue Expert Skill
Expert-level Vue 3 patterns, Composition API, state management, and performance optimization.
Auto-Detection
This skill activates when:
- Working with
.vuefiles - Using Vue 3 Composition API
- Detected
vuein package.json - Using Pinia or Nuxt
1. Composition API Patterns
Script Setup (Preferred)
<!-- ✅ GOOD - script setup syntax -->
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import type { User } from '@/types';
// Props with defaults
interface Props {
user: User;
showAvatar?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
showAvatar: true,
});
// Emits with types
const emit = defineEmits<{
select: [user: User];
update: [id: string, data: Partial<User>];
}>();
// Reactive state
const isLoading = ref(false);
const items = ref<Item[]>([]);
// Computed
const fullName = computed(() => `${props.user.firstName} ${props.user.lastName}`);
// Methods
function handleSelect() {
emit('select', props.user);
}
// Lifecycle
onMounted(async () => {
isLoading.value = true;
items.value = await fetchItems();
isLoading.value = false;
});
</script>Composables (Custom Hooks)
// ✅ GOOD - Reusable composable
// composables/useUser.ts
import { ref, computed } from 'vue';
import type { User } from '@/types';
export function useUser(userId: Ref<string>) {
const user = ref<User | null>(null);
const isLoading = ref(false);
const error = ref<Error | null>(null);
const fullName = computed(() => {
if (user.value == null) return '';
return `${user.value.firstName} ${user.value.lastName}`;
});
async function fetchUser() {
isLoading.value = true;
error.value = null;
try {
user.value = await api.getUser(userId.value);
} catch (e) {
error.value = e instanceof Error ? e : new Error('Unknown error');
} finally {
isLoading.value = false;
}
}
watch(userId, fetchUser, { immediate: true });
return {
user: readonly(user),
fullName,
isLoading: readonly(isLoading),
error: readonly(error),
refetch: fetchUser,
};
}
// Usage
const userId = ref('123');
const { user, fullName, isLoading } = useUser(userId);2. Reactivity Best Practices
ref vs reactive
// ✅ GOOD - ref for primitives
const count = ref(0);
const name = ref('');
const isActive = ref(false);
// ✅ GOOD - ref for objects (consistent .value)
const user = ref<User | null>(null);
user.value = { id: '1', name: 'John' };
// ⚠️ CAUTION - reactive loses reactivity on reassignment
const state = reactive({ user: null });
state.user = newUser; // ✅ Works
// state = { user: newUser }; // ❌ Loses reactivity!
// ✅ GOOD - Use ref for replaceable objects
const user = ref<User | null>(null);
user.value = newUser; // ✅ WorksWatch Patterns
// ✅ GOOD - Watch single ref
watch(userId, async (newId, oldId) => {
if (newId !== oldId) {
await fetchUser(newId);
}
});
// ✅ GOOD - Watch multiple sources
watch(
[userId, companyId],
async ([newUserId, newCompanyId]) => {
await fetchData(newUserId, newCompanyId);
}
);
// ✅ GOOD - watchEffect for auto-tracking
watchEffect(async () => {
// Automatically tracks userId.value
const data = await fetchUser(userId.value);
user.value = data;
});
// ✅ GOOD - Cleanup in watch
watch(userId, async (newId, oldId, onCleanup) => {
const controller = new AbortController();
onCleanup(() => controller.abort());
const data = await fetchUser(newId, { signal: controller.signal });
user.value = data;
});3. Template Best Practices
Conditional Rendering
<template>
<!-- ❌ BAD - Implicit truthy check -->
<div v-if="userName">{{ userName }}</div>
<!-- ✅ GOOD - Explicit check -->
<div v-if="userName != null && userName !== ''">{{ userName }}</div>
<!-- ✅ GOOD - v-show for frequent toggles -->
<div v-show="isVisible">Frequently toggled content</div>
<!-- ✅ GOOD - v-if for conditional rendering -->
<div v-if="isLoaded">Rendered once</div>
<!-- ✅ GOOD - Template for multiple elements -->
<template v-if="items.length > 0">
<h2>Items</h2>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<EmptyState v-else />
</template>List Rendering
<template>
<!-- ❌ BAD - Index as key -->
<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
<!-- ✅ GOOD - Unique ID as key -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
<!-- ✅ GOOD - v-for with v-if (separate element) -->
<template v-for="item in items" :key="item.id">
<li v-if="item.isVisible">{{ item.name }}</li>
</template>
<!-- ✅ GOOD - Computed for filtering -->
<li v-for="item in visibleItems" :key="item.id">{{ item.name }}</li>
</template>
<script setup lang="ts">
const visibleItems = computed(() => items.value.filter(item => item.isVisible));
</script>Event Handling
<template>
<!-- ✅ GOOD - Inline for simple -->
<button @click="count++">Increment</button>
<!-- ✅ GOOD - Method reference -->
<button @click="handleClick">Click</button>
<!-- ✅ GOOD - With event -->
<input @input="handleInput($event)" />
<!-- ✅ GOOD - Modifiers -->
<form @submit.prevent="handleSubmit">
<input @keyup.enter="submit" />
<div @click.stop="handleClick">
</template>4. Component Design
Props Validation
<script setup lang="ts">
// ✅ GOOD - Type-based props
interface Props {
// Required
id: string;
user: User;
// Optional with type
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
// With default (use withDefaults)
variant?: 'primary' | 'secondary';
}
const props = withDefaults(defineProps<Props>(), {
size: 'md',
disabled: false,
variant: 'primary',
});
</script>Slots
<!-- ParentComponent.vue -->
<template>
<Card>
<template #header>
<h2>Title</h2>
</template>
<template #default>
<p>Main content</p>
</template>
<template #footer="{ canSubmit }">
<button :disabled="!canSubmit">Submit</button>
</template>
</Card>
</template>
<!-- Card.vue -->
<template>
<div class="card">
<header v-if="$slots.header">
<slot name="header" />
</header>
<main>
<slot />
</main>
<footer v-if="$slots.footer">
<slot name="footer" :canSubmit="isValid" />
</footer>
</div>
</template>Expose
<!-- ✅ GOOD - Expose specific methods/refs -->
<script setup lang="ts">
const inputRef = ref<HTMLInputElement | null>(null);
function focus() {
inputRef.value?.focus();
}
function reset() {
// Reset logic
}
// Only expose what's needed
defineExpose({
focus,
reset,
});
</script>5. State Management (Pinia)
Store Definition
// stores/user.ts
import { defineStore } from 'pinia';
// ✅ GOOD - Setup store syntax (Composition API style)
export const useUserStore = defineStore('user', () => {
// State
const user = ref<User | null>(null);
const isLoading = ref(false);
// Getters
const isAuthenticated = computed(() => user.value != null);
const fullName = computed(() => {
if (user.value == null) return '';
return `${user.value.firstName} ${user.value.lastName}`;
});
// Actions
async function login(credentials: Credentials) {
isLoading.value = true;
try {
user.value = await authApi.login(credentials);
} finally {
isLoading.value = false;
}
}
function logout() {
user.value = null;
}
return {
// State
user: readonly(user),
isLoading: readonly(isLoading),
// Getters
isAuthenticated,
fullName,
// Actions
login,
logout,
};
});Store Usage
<script setup lang="ts">
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';
const userStore = useUserStore();
// ✅ GOOD - storeToRefs for reactive destructuring
const { user, isAuthenticated, fullName } = storeToRefs(userStore);
// Actions don't need storeToRefs
const { login, logout } = userStore;
</script>6. Performance Optimization
Computed Caching
// ✅ GOOD - Computed for derived state (cached)
const sortedItems = computed(() => {
return [...items.value].sort((a, b) => a.name.localeCompare(b.name));
});
// ❌ BAD - Method called in template (no caching)
function getSortedItems() {
return [...items.value].sort((a, b) => a.name.localeCompare(b.name));
}v-once and v-memo
<template>
<!-- ✅ GOOD - Static content -->
<footer v-once>
<p>Copyright 2024</p>
</footer>
<!-- ✅ GOOD - Memoize expensive renders -->
<div v-for="item in items" :key="item.id" v-memo="[item.id, item.selected]">
<ExpensiveComponent :item="item" />
</div>
</template>Async Components
// ✅ GOOD - Lazy load components
const HeavyComponent = defineAsyncComponent(() =>
import('./components/HeavyComponent.vue')
);
// ✅ GOOD - With loading/error states
const AsyncModal = defineAsyncComponent({
loader: () => import('./Modal.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorDisplay,
delay: 200,
timeout: 3000,
});7. Form Handling
VeeValidate + Zod
<script setup lang="ts">
import { useForm } from 'vee-validate';
import { toTypedSchema } from '@vee-validate/zod';
import { z } from 'zod';
const schema = toTypedSchema(
z.object({
email: z.string().email('Invalid email'),
password: z.string().min(8, 'Min 8 characters'),
})
);
const { handleSubmit, errors, defineField } = useForm({
validationSchema: schema,
});
const [email, emailAttrs] = defineField('email');
const [password, passwordAttrs] = defineField('password');
const onSubmit = handleSubmit(async (values) => {
await login(values);
});
</script>
<template>
<form @submit="onSubmit">
<input v-model="email" v-bind="emailAttrs" type="email" />
<span v-if="errors.email">{{ errors.email }}</span>
<input v-model="password" v-bind="passwordAttrs" type="password" />
<span v-if="errors.password">{{ errors.password }}</span>
<button type="submit">Login</button>
</form>
</template>8. TypeScript Integration
Component Types
// ✅ GOOD - Import component type
import type { Component } from 'vue';
import MyComponent from './MyComponent.vue';
// ✅ GOOD - Template ref typing
const modalRef = ref<InstanceType<typeof MyComponent> | null>(null);
// ✅ GOOD - Global component types (env.d.ts)
declare module 'vue' {
export interface GlobalComponents {
RouterLink: typeof import('vue-router')['RouterLink'];
RouterView: typeof import('vue-router')['RouterView'];
}
}Quick Reference
checklist[12]{pattern,best_practice}:
Script,Use script setup lang="ts"
State,ref for primitives and objects
Props,withDefaults + defineProps<Props>()
Emits,defineEmits with typed events
Computed,Use for derived reactive state
Watch,Use onCleanup for async
Templates,Explicit v-if checks
Keys,Unique IDs not indices
Store,Pinia setup store syntax
Store refs,storeToRefs for destructuring
Async,defineAsyncComponent for lazy load
Forms,VeeValidate + Zod