yigityildiz0 Vue Expert
Specialized expertise in Vue 3 development, providing deep guidance on Composition API fundamentals, Single File Component architecture, composable design, Pinia state management, Vue Router patterns, performance optimization, testing with Vitest and Vue Test Utils, and advanced TypeScript integration.
When to Use This Skill
Use this skill for:
- Building Vue 3 applications with the Composition API (ref, reactive, computed, watch)
- Designing Single File Components with typed props, emits, slots, and v-model
- Extracting reusable logic into composables (useAsync, useFetch, useForm)
- Managing application state with Pinia (stores, getters, actions, plugins)
- Configuring Vue Router with guards, lazy loading, nested routes, and meta fields
- Optimizing rendering performance (shallowRef, v-once, v-memo, KeepAlive, async components)
- Testing components and composables with Vitest and Vue Test Utils
- Integrating TypeScript with generic components, typed slots, and module augmentation
Trigger phrases: "vue component", "vue composable", "composition api", "ref reactive", "pinia store", "vue router", "vue performance", "vue testing", "vue typescript", "defineProps", "defineEmits", "provide inject", "v-model", "shallowRef", "keepalive", "vue test utils"
What This Skill Does
Provides Vue 3 expertise including:
- Composition API: ref, reactive, computed, watch, watchEffect, lifecycle hooks
- Component Patterns: SFC structure, props/emits with TypeScript, slots, provide/inject, v-model
- Composables: Custom composable design, async patterns, shared state, dependency injection
- State Management: Pinia stores, getters, actions, plugins, SSR hydration, devtools
- Routing: Vue Router guards, lazy loading, nested routes, navigation, typed meta fields
- Performance: shallowRef, v-once, v-memo, KeepAlive, async components, virtual scrolling
- Testing: Vitest, Vue Test Utils, component mounting, composable testing, router/store mocking
- TypeScript: Typed props, typed emits, generic components, typed slots, global property augmentation
Instructions
Step 1: Master Composition API Fundamentals
ref and reactive for state management:
<script setup lang="ts">
import { ref, reactive, computed, watch, watchEffect, onMounted } from "vue";
// ref for primitives and single values (unwraps in template automatically)
const count = ref(0);
const searchQuery = ref("");
// reactive for objects (deep reactivity by default)
interface UserProfile {
name: string;
email: string;
preferences: {
theme: "light" | "dark";
locale: string;
};
}
const profile = reactive<UserProfile>({
name: "",
email: "",
preferences: {
theme: "light",
locale: "en-US",
},
});
// computed for derived state (cached, recalculates only when dependencies change)
const displayName = computed(() => {
return profile.name.trim() || "Anonymous User";
});
const filteredResults = computed(() => {
const query = searchQuery.value.toLowerCase();
if (!query) return allResults.value;
return allResults.value.filter((item) =>
item.title.toLowerCase().includes(query)
);
});
// Writable computed for two-way derived state
const fullName = computed({
get: () => `${profile.name}`.trim(),
set: (value: string) => {
const [first, ...rest] = value.split(" ");
profile.name = first ?? "";
},
});
</script>
watch and watchEffect for side effects:
<script setup lang="ts">
import { ref, watch, watchEffect, onMounted, onUnmounted } from "vue";
const userId = ref<string | null>(null);
const userData = ref<User | null>(null);
const loading = ref(false);
const error = ref<Error | null>(null);
// watch: explicit source, access to old and new values, lazy by default
watch(userId, async (newId, oldId) => {
if (!newId) {
userData.value = null;
return;
}
loading.value = true;
error.value = null;
try {
const response = await fetch(`/api/users/${newId}`);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
userData.value = await response.json();
} catch (err) {
error.value = err instanceof Error ? err : new Error(String(err));
} finally {
loading.value = false;
}
});
// watch with options: immediate runs on setup, deep watches nested changes
watch(
() => profile.preferences,
(newPrefs) => {
localStorage.setItem("user-prefs", JSON.stringify(newPrefs));
},
{ deep: true, immediate: true }
);
// watch multiple sources simultaneously
watch(
[() => filters.category, () => filters.sortBy, currentPage],
([category, sortBy, page]) => {
fetchProducts({ category, sortBy, page });
}
);
// watchEffect: auto-tracks dependencies, runs immediately
const stopWatcher = watchEffect((onCleanup) => {
const controller = new AbortController();
if (searchQuery.value.length >= 3) {
fetchSuggestions(searchQuery.value, controller.signal);
}
// Cleanup function runs before each re-execution and on unmount
onCleanup(() => controller.abort());
});
// Lifecycle hooks in Composition API
onMounted(() => {
document.addEventListener("keydown", handleKeyDown);
});
onUnmounted(() => {
document.removeEventListener("keydown", handleKeyDown);
stopWatcher();
});
</script>
Step 2: Design Component Patterns
Single File Component structure with typed props and emits:
<script setup lang="ts">
import { computed, useSlots } from "vue";
// Typed props with defaults using withDefaults
interface DataTableProps {
rows: Record<string, unknown>[];
columns: {
key: string;
label: string;
sortable?: boolean;
width?: string;
}[];
loading?: boolean;
striped?: boolean;
stickyHeader?: boolean;
emptyMessage?: string;
}
const props = withDefaults(defineProps<DataTableProps>(), {
loading: false,
striped: true,
stickyHeader: false,
emptyMessage: "No data available",
});
// Typed emits with payload validation
const emit = defineEmits<{
sort: [column: string, direction: "asc" | "desc"];
"row-click": [row: Record<string, unknown>, index: number];
"selection-change": [selectedRows: Record<string, unknown>[]];
}>();
const slots = useSlots();
const hasFooter = computed(() => !!slots.footer);
function handleSort(columnKey: string) {
const currentDirection = sortState.value.key === columnKey
? sortState.value.direction
: "asc";
const nextDirection = currentDirection === "asc" ? "desc" : "asc";
emit("sort", columnKey, nextDirection);
}
</script>
<template>
<div class="data-table" :class="{ 'data-table--striped': striped }">
<div v-if="loading" class="data-table__loading">
<slot name="loading">
<span>Loading...</span>
</slot>
</div>
<table v-else-if="rows.length > 0">
<thead :class="{ 'sticky-header': stickyHeader }">
<tr>
<th
v-for="col in columns"
:key="col.key"
:style="{ width: col.width }"
:class="{ sortable: col.sortable }"
@click="col.sortable ? handleSort(col.key) : undefined"
>
<slot :name="`header-${col.key}`" :column="col">
{{ col.label }}
</slot>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(row, index) in rows"
:key="index"
@click="emit('row-click', row, index)"
>
<td v-for="col in columns" :key="col.key">
<slot :name="`cell-${col.key}`" :value="row[col.key]" :row="row">
{{ row[col.key] }}
</slot>
</td>
</tr>
</tbody>
<tfoot v-if="hasFooter">
<tr>
<td :colspan="columns.length">
<slot name="footer" />
</td>
</tr>
</tfoot>
</table>
<div v-else class="data-table__empty">
<slot name="empty">
<p>{{ emptyMessage }}</p>
</slot>
</div>
</div>
</template>
v-model with multiple bindings:
<!-- DateRangePicker.vue -->
<script setup lang="ts">
interface DateRange {
start: string;
end: string;
}
const startDate = defineModel<string>("start", { required: true });
const endDate = defineModel<string>("end", { required: true });
const isOpen = defineModel<boolean>("open", { default: false });
function selectPreset(preset: "today" | "week" | "month") {
const now = new Date();
const start = new Date();
if (preset === "week") start.setDate(now.getDate() - 7);
else if (preset === "month") start.setMonth(now.getMonth() - 1);
startDate.value = start.toISOString().split("T")[0];
endDate.value = now.toISOString().split("T")[0];
}
</script>
<template>
<div class="date-range-picker">
<input type="date" v-model="startDate" />
<span>to</span>
<input type="date" v-model="endDate" />
<div class="presets">
<button @click="selectPreset('today')">Today</button>
<button @click="selectPreset('week')">Last 7 days</button>
<button @click="selectPreset('month')">Last 30 days</button>
</div>
</div>
</template>
<!-- Parent usage with multiple v-model bindings -->
<!-- <DateRangePicker v-model:start="from" v-model:end="to" v-model:open="pickerOpen" /> -->
provide/inject for dependency injection:
<!-- NotificationProvider.vue -->
<script setup lang="ts">
import { provide, reactive, readonly } from "vue";
import type { InjectionKey } from "vue";
interface Notification {
id: string;
type: "success" | "error" | "warning" | "info";
message: string;
duration?: number;
}
interface NotificationContext {
notifications: readonly Notification[];
notify: (notification: Omit<Notification, "id">) => void;
dismiss: (id: string) => void;
}
export const NotificationKey: InjectionKey<NotificationContext> =
Symbol("notification");
const state = reactive<{ notifications: Notification[] }>({
notifications: [],
});
function notify(notification: Omit<Notification, "id">) {
const id = crypto.randomUUID();
state.notifications.push({ ...notification, id });
const duration = notification.duration ?? 5000;
if (duration > 0) {
setTimeout(() => dismiss(id), duration);
}
}
function dismiss(id: string) {
const index = state.notifications.findIndex((n) => n.id === id);
if (index !== -1) state.notifications.splice(index, 1);
}
provide(NotificationKey, {
notifications: readonly(state.notifications),
notify,
dismiss,
});
</script>
<template>
<slot />
<Teleport to="body">
<TransitionGroup name="notification" tag="div" class="notification-stack">
<div
v-for="n in state.notifications"
:key="n.id"
:class="['notification', `notification--${n.type}`]"
role="alert"
>
<span>{{ n.message }}</span>
<button @click="dismiss(n.id)" aria-label="Dismiss notification">
×
</button>
</div>
</TransitionGroup>
</Teleport>
</template>
<!-- Any descendant component -->
<script setup lang="ts">
import { inject } from "vue";
import { NotificationKey } from "./NotificationProvider.vue";
const { notify } = inject(NotificationKey)!;
function handleSave() {
try {
// save logic...
notify({ type: "success", message: "Settings saved successfully." });
} catch {
notify({ type: "error", message: "Failed to save settings.", duration: 0 });
}
}
</script>
Step 3: Build Composables for Reusable Logic
useAsync composable for async operations:
// composables/useAsync.ts
import { ref, type Ref } from "vue";
interface UseAsyncReturn<T> {
data: Ref<T | null>;
error: Ref<Error | null>;
loading: Ref<boolean>;
execute: (...args: unknown[]) => Promise<T | null>;
reset: () => void;
}
export function useAsync<T>(
asyncFn: (...args: unknown[]) => Promise<T>
): UseAsyncReturn<T> {
const data = ref<T | null>(null) as Ref<T | null>;
const error = ref<Error | null>(null);
const loading = ref(false);
async function execute(...args: unknown[]): Promise<T | null> {
loading.value = true;
error.value = null;
try {
const result = await asyncFn(...args);
data.value = result;
return result;
} catch (err) {
error.value = err instanceof Error ? err : new Error(String(err));
return null;
} finally {
loading.value = false;
}
}
function reset() {
data.value = null;
error.value = null;
loading.value = false;
}
return { data, error, loading, execute, reset };
}
useFetch composable with abort and caching:
// composables/useFetch.ts
import { ref, watch, toValue, type MaybeRefOrGetter, type Ref } from "vue";
interface UseFetchOptions {
immediate?: boolean;
refetch?: boolean;
}
interface UseFetchReturn<T> {
data: Ref<T | null>;
error: Ref<Error | null>;
loading: Ref<boolean>;
execute: () => Promise<void>;
abort: () => void;
}
const cache = new Map<string, { data: unknown; timestamp: number }>();
const STALE_TIME = 5 * 60 * 1000;
export function useFetch<T>(
url: MaybeRefOrGetter<string>,
options: UseFetchOptions = {}
): UseFetchReturn<T> {
const { immediate = true, refetch = true } = options;
const data = ref<T | null>(null) as Ref<T | null>;
const error = ref<Error | null>(null);
const loading = ref(false);
let controller: AbortController | null = null;
async function execute(): Promise<void> {
const resolvedUrl = toValue(url);
// Check cache first
const cached = cache.get(resolvedUrl);
if (cached && Date.now() - cached.timestamp < STALE_TIME) {
data.value = cached.data as T;
return;
}
abort();
controller = new AbortController();
loading.value = true;
error.value = null;
try {
const response = await fetch(resolvedUrl, {
signal: controller.signal,
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const json: T = await response.json();
data.value = json;
cache.set(resolvedUrl, { data: json, timestamp: Date.now() });
} catch (err) {
if (err instanceof Error && err.name !== "AbortError") {
error.value = err;
}
} finally {
loading.value = false;
}
}
function abort() {
controller?.abort();
controller = null;
}
if (refetch) {
watch(() => toValue(url), execute);
}
if (immediate) {
execute();
}
return { data, error, loading, execute, abort };
}
useForm composable with validation:
// composables/useForm.ts
import { reactive, computed, type UnwrapNestedRefs } from "vue";
type ValidationRule<T> = (value: T) => string | true;
type FieldRules<T> = { [K in keyof T]?: ValidationRule<T[K]>[] };
interface UseFormReturn<T extends Record<string, unknown>> {
fields: UnwrapNestedRefs<T>;
errors: Record<keyof T, string[]>;
isValid: boolean;
isDirty: boolean;
validate: () => boolean;
validateField: (field: keyof T) => void;
reset: () => void;
handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (e: Event) => void;
}
export function useForm<T extends Record<string, unknown>>(
initialValues: T,
rules: FieldRules<T> = {}
): UseFormReturn<T> {
const fields = reactive({ ...initialValues }) as UnwrapNestedRefs<T>;
const errors = reactive<Record<keyof T, string[]>>(
Object.keys(initialValues).reduce(
(acc, key) => ({ ...acc, [key]: [] }),
{} as Record<keyof T, string[]>
)
);
const touched = reactive<Record<keyof T, boolean>>(
Object.keys(initialValues).reduce(
(acc, key) => ({ ...acc, [key]: false }),
{} as Record<keyof T, boolean>
)
);
const isValid = computed(() =>
Object.values(errors).every(
(fieldErrors) => (fieldErrors as string[]).length === 0
)
);
const isDirty = computed(() =>
Object.keys(initialValues).some(
(key) => fields[key as keyof T] !== initialValues[key as keyof T]
)
);
function validateField(field: keyof T) {
const fieldRules = rules[field] ?? [];
const value = fields[field];
const fieldErrors: string[] = [];
for (const rule of fieldRules) {
const result = rule(value as T[keyof T]);
if (result !== true) fieldErrors.push(result);
}
errors[field] = fieldErrors as never;
}
function validate(): boolean {
for (const field of Object.keys(rules) as (keyof T)[]) {
validateField(field);
}
return isValid.value;
}
function reset() {
Object.assign(fields, initialValues);
for (const key of Object.keys(errors)) {
errors[key as keyof T] = [] as never;
}
}
function handleSubmit(onSubmit: (values: T) => void | Promise<void>) {
return async (e: Event) => {
e.preventDefault();
if (validate()) {
await onSubmit({ ...fields } as T);
}
};
}
return { fields, errors, isValid, isDirty, validate, validateField, reset, handleSubmit };
}
Step 4: Manage State with Pinia
Defining a Pinia store with TypeScript:
// stores/useProductStore.ts
import { defineStore } from "pinia";
import { computed, ref } from "vue";
interface Product {
id: string;
name: string;
price: number;
category: string;
inStock: boolean;
}
interface ProductFilters {
category: string | null;
minPrice: number;
maxPrice: number;
inStockOnly: boolean;
}
// Setup store syntax (Composition API style, recommended)
export const useProductStore = defineStore("products", () => {
// State
const products = ref<Product[]>([]);
const filters = ref<ProductFilters>({
category: null,
minPrice: 0,
maxPrice: Infinity,
inStockOnly: false,
});
const loading = ref(false);
const error = ref<string | null>(null);
// Getters (computed)
const filteredProducts = computed(() => {
return products.value.filter((product) => {
if (filters.value.category && product.category !== filters.value.category) {
return false;
}
if (product.price < filters.value.minPrice) return false;
if (product.price > filters.value.maxPrice) return false;
if (filters.value.inStockOnly && !product.inStock) return false;
return true;
});
});
const categories = computed(() => {
const cats = new Set(products.value.map((p) => p.category));
return Array.from(cats).sort();
});
const totalValue = computed(() =>
products.value.reduce((sum, p) => sum + p.price, 0)
);
// Actions
async function fetchProducts(): Promise<void> {
loading.value = true;
error.value = null;
try {
const response = await fetch("/api/products");
if (!response.ok) throw new Error(`HTTP ${response.status}`);
products.value = await response.json();
} catch (err) {
error.value = err instanceof Error ? err.message : "Failed to fetch products";
} finally {
loading.value = false;
}
}
async function addProduct(product: Omit<Product, "id">): Promise<Product | null> {
try {
const response = await fetch("/api/products", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(product),
});
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const created: Product = await response.json();
products.value.push(created);
return created;
} catch (err) {
error.value = err instanceof Error ? err.message : "Failed to add product";
return null;
}
}
function updateFilters(newFilters: Partial<ProductFilters>) {
filters.value = { ...filters.value, ...newFilters };
}
function $reset() {
products.value = [];
filters.value = { category: null, minPrice: 0, maxPrice: Infinity, inStockOnly: false };
loading.value = false;
error.value = null;
}
return {
// State
products,
filters,
loading,
error,
// Getters
filteredProducts,
categories,
totalValue,
// Actions
fetchProducts,
addProduct,
updateFilters,
$reset,
};
});
Pinia plugin for persistence and logging:
// plugins/piniaLogger.ts
import type { PiniaPluginContext } from "pinia";
export function piniaLogger({ store }: PiniaPluginContext) {
store.$onAction(({ name, args, after, onError }) => {
const startTime = performance.now();
after((result) => {
const duration = (performance.now() - startTime).toFixed(2);
console.debug(
`[Pinia] ${store.$id}.${name}() completed in ${duration}ms`,
{ args, result }
);
});
onError((error) => {
console.error(`[Pinia] ${store.$id}.${name}() failed`, { args, error });
});
});
}
// plugins/piniaPersist.ts
export function piniaPersist({ store }: PiniaPluginContext) {
const key = `pinia-${store.$id}`;
// Hydrate from localStorage on store creation
const saved = localStorage.getItem(key);
if (saved) {
try {
store.$patch(JSON.parse(saved));
} catch {
localStorage.removeItem(key);
}
}
// Persist on every state change
store.$subscribe((_mutation, state) => {
localStorage.setItem(key, JSON.stringify(state));
});
}
// main.ts — register plugins
import { createPinia } from "pinia";
import { piniaLogger } from "./plugins/piniaLogger";
import { piniaPersist } from "./plugins/piniaPersist";
const pinia = createPinia();
pinia.use(piniaLogger);
pinia.use(piniaPersist);
Store composition (stores using other stores):
// stores/useCartStore.ts
import { defineStore } from "pinia";
import { computed, ref } from "vue";
import { useProductStore } from "./useProductStore";
import { useAuthStore } from "./useAuthStore";
interface CartItem {
productId: string;
quantity: number;
}
export const useCartStore = defineStore("cart", () => {
const productStore = useProductStore();
const authStore = useAuthStore();
const items = ref<CartItem[]>([]);
const enrichedItems = computed(() =>
items.value
.map((item) => {
const product = productStore.products.find((p) => p.id === item.productId);
if (!product) return null;
return {
...item,
name: product.name,
price: product.price,
subtotal: product.price * item.quantity,
};
})
.filter(Boolean)
);
const total = computed(() =>
enrichedItems.value.reduce((sum, item) => sum + (item?.subtotal ?? 0), 0)
);
function addToCart(productId: string, quantity = 1) {
if (!authStore.isAuthenticated) {
throw new Error("Must be logged in to add items to cart");
}
const existing = items.value.find((i) => i.productId === productId);
if (existing) {
existing.quantity += quantity;
} else {
items.value.push({ productId, quantity });
}
}
function removeFromCart(productId: string) {
items.value = items.value.filter((i) => i.productId !== productId);
}
return { items, enrichedItems, total, addToCart, removeFromCart };
});
Step 5: Configure Vue Router Patterns
Route configuration with lazy loading and typed meta:
// router/index.ts
import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
// Extend RouteMeta for type-safe meta fields
declare module "vue-router" {
interface RouteMeta {
requiresAuth?: boolean;
roles?: string[];
title?: string;
transition?: "slide-left" | "slide-right" | "fade";
}
}
const routes: RouteRecordRaw[] = [
{
path: "/",
component: () => import("../layouts/DefaultLayout.vue"),
children: [
{
path: "",
name: "home",
component: () => import("../pages/HomePage.vue"),
meta: { title: "Home" },
},
{
path: "products",
name: "products",
component: () => import("../pages/ProductsPage.vue"),
meta: { title: "Products" },
},
{
path: "products/:id",
name: "product-detail",
component: () => import("../pages/ProductDetailPage.vue"),
props: true,
meta: { title: "Product Detail" },
},
],
},
{
path: "/dashboard",
component: () => import("../layouts/DashboardLayout.vue"),
meta: { requiresAuth: true },
children: [
{
path: "",
name: "dashboard",
component: () => import("../pages/DashboardPage.vue"),
meta: { title: "Dashboard", roles: ["user", "admin"] },
},
{
path: "settings",
name: "settings",
component: () => import("../pages/SettingsPage.vue"),
meta: { title: "Settings", roles: ["user", "admin"] },
},
{
path: "admin",
name: "admin",
component: () => import("../pages/AdminPage.vue"),
meta: { title: "Admin Panel", roles: ["admin"] },
},
],
},
{
path: "/login",
name: "login",
component: () => import("../pages/LoginPage.vue"),
meta: { title: "Sign In" },
},
{
path: "/:pathMatch(.*)*",
name: "not-found",
component: () => import("../pages/NotFoundPage.vue"),
meta: { title: "Page Not Found" },
},
];
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes,
scrollBehavior(to, _from, savedPosition) {
if (savedPosition) return savedPosition;
if (to.hash) return { el: to.hash, behavior: "smooth" };
return { top: 0 };
},
});
export default router;
Navigation guards for auth and role checking:
// router/guards.ts
import type { Router } from "vue-router";
import { useAuthStore } from "../stores/useAuthStore";
export function registerGuards(router: Router) {
// Global before guard: authentication and authorization
router.beforeEach(async (to, _from) => {
const authStore = useAuthStore();
// Update document title
document.title = to.meta.title
? `${to.meta.title} | MyApp`
: "MyApp";
// Check if route requires authentication
if (to.meta.requiresAuth && !authStore.isAuthenticated) {
return {
name: "login",
query: { redirect: to.fullPath },
};
}
// Check role-based access
if (to.meta.roles && to.meta.roles.length > 0) {
const hasRole = to.meta.roles.some((role) =>
authStore.user?.roles.includes(role)
);
if (!hasRole) {
return { name: "dashboard" };
}
}
return true;
});
// Global after hook: analytics tracking
router.afterEach((to, from) => {
if (to.path !== from.path) {
trackPageView(to.fullPath, to.meta.title);
}
});
// Per-route error handling
router.onError((error, to) => {
// Handle lazy-loaded chunk failures (common after deployments)
if (
error.message.includes("Failed to fetch dynamically imported module") ||
error.message.includes("Loading chunk")
) {
window.location.href = to.fullPath;
}
});
}
function trackPageView(path: string, title?: string) {
// Analytics integration point
console.debug("[Analytics]", { path, title });
}
Programmatic navigation and route composable:
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { computed, watch } from "vue";
const router = useRouter();
const route = useRoute();
// Reactive route params
const productId = computed(() => route.params.id as string);
const searchQuery = computed(() => (route.query.q as string) ?? "");
const currentPage = computed(() => Number(route.query.page) || 1);
// Update query params without full navigation
function updateSearch(query: string) {
router.replace({
query: {
...route.query,
q: query || undefined,
page: undefined, // Reset page when search changes
},
});
}
function goToPage(page: number) {
router.push({
query: { ...route.query, page: page > 1 ? String(page) : undefined },
});
}
// Navigate after an action
async function handleDelete(id: string) {
await deleteProduct(id);
await router.push({ name: "products" });
}
// Watch route changes for data fetching
watch(
() => route.params.id,
(newId) => {
if (newId) fetchProductDetail(newId as string);
},
{ immediate: true }
);
</script>
Step 6: Optimize Performance
shallowRef and shallowReactive for large datasets:
<script setup lang="ts">
import {
shallowRef,
triggerRef,
computed,
defineAsyncComponent,
} from "vue";
interface LogEntry {
id: string;
timestamp: number;
level: "info" | "warn" | "error";
message: string;
metadata: Record<string, unknown>;
}
// shallowRef: only triggers updates when .value is reassigned,
// not when nested properties change. Ideal for large arrays and objects.
const logEntries = shallowRef<LogEntry[]>([]);
function appendLog(entry: LogEntry) {
// Must reassign .value to trigger reactivity (push alone will not work)
logEntries.value = [...logEntries.value, entry];
}
function bulkAppend(entries: LogEntry[]) {
// Batch update: single reactivity trigger for multiple additions
logEntries.value = [...logEntries.value, ...entries];
}
// For cases where you must mutate in place, use triggerRef
function clearOldEntries(maxAge: number) {
const cutoff = Date.now() - maxAge;
logEntries.value = logEntries.value.filter((e) => e.timestamp > cutoff);
// If mutating in place instead of reassigning:
// logEntries.value.splice(0, removeCount);
// triggerRef(logEntries);
}
const errorCount = computed(
() => logEntries.value.filter((e) => e.level === "error").length
);
</script>
v-once, v-memo, and KeepAlive:
<template>
<!-- v-once: renders once, never re-renders (static content) -->
<header v-once>
<h1>{{ appTitle }}</h1>
<nav>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<!-- v-memo: skip re-render unless specified dependencies change -->
<!-- Useful in v-for loops with expensive row rendering -->
<div class="user-list">
<div
v-for="user in users"
:key="user.id"
v-memo="[user.name, user.avatar, user.id === selectedId]"
class="user-card"
:class="{ selected: user.id === selectedId }"
@click="selectedId = user.id"
>
<img :src="user.avatar" :alt="user.name" />
<span>{{ user.name }}</span>
<ExpensiveStatusBadge :status="user.status" />
</div>
</div>
<!-- KeepAlive: caches component instances instead of destroying them -->
<KeepAlive :include="['ProductList', 'SearchResults']" :max="5">
<component :is="currentTab" />
</KeepAlive>
</template>
<script setup lang="ts">
import { ref, onActivated, onDeactivated } from "vue";
// KeepAlive lifecycle hooks
onActivated(() => {
// Called when component is re-inserted from cache
// Refresh data that may have gone stale
refreshData();
});
onDeactivated(() => {
// Called when component is cached (removed from DOM but kept alive)
// Pause expensive operations like polling
stopPolling();
});
</script>
Async components and Suspense:
<script setup lang="ts">
import { defineAsyncComponent, ref } from "vue";
// Async component with loading and error states
const HeavyChart = defineAsyncComponent({
loader: () => import("./HeavyChart.vue"),
loadingComponent: () => import("./ChartSkeleton.vue"),
errorComponent: () => import("./ChartError.vue"),
delay: 200, // Show loading after 200ms (avoids flash for fast loads)
timeout: 10000, // Fail after 10 seconds
});
// Simple async component for code splitting
const AdminPanel = defineAsyncComponent(
() => import("./AdminPanel.vue")
);
const showChart = ref(false);
</script>
<template>
<button @click="showChart = true">Load Chart</button>
<!-- Suspense for coordinating multiple async dependencies -->
<Suspense v-if="showChart">
<template #default>
<HeavyChart :data="chartData" />
</template>
<template #fallback>
<div class="skeleton">Loading chart data...</div>
</template>
</Suspense>
</template>
Virtual scrolling for large lists:
<script setup lang="ts">
import { ref, computed } from "vue";
interface VirtualListProps {
items: unknown[];
itemHeight: number;
containerHeight: number;
overscan?: number;
}
const props = withDefaults(defineProps<VirtualListProps>(), {
overscan: 5,
});
const scrollTop = ref(0);
const totalHeight = computed(() => props.items.length * props.itemHeight);
const visibleRange = computed(() => {
const start = Math.floor(scrollTop.value / props.itemHeight);
const visibleCount = Math.ceil(props.containerHeight / props.itemHeight);
return {
start: Math.max(0, start - props.overscan),
end: Math.min(props.items.length, start + visibleCount + props.overscan),
};
});
const visibleItems = computed(() =>
props.items.slice(visibleRange.value.start, visibleRange.value.end).map(
(item, index) => ({
item,
index: visibleRange.value.start + index,
style: {
position: "absolute" as const,
top: `${(visibleRange.value.start + index) * props.itemHeight}px`,
height: `${props.itemHeight}px`,
width: "100%",
},
})
)
);
function onScroll(event: UIEvent) {
scrollTop.value = (event.target as HTMLElement).scrollTop;
}
</script>
<template>
<div
class="virtual-list"
:style="{ height: `${containerHeight}px`, overflow: 'auto', position: 'relative' }"
@scroll="onScroll"
>
<div :style="{ height: `${totalHeight}px`, position: 'relative' }">
<div
v-for="{ item, index, style } in visibleItems"
:key="index"
:style="style"
>
<slot :item="item" :index="index" />
</div>
</div>
</div>
</template>
Step 7: Test with Vitest and Vue Test Utils
Component testing fundamentals:
// components/__tests__/LoginForm.test.ts
import { describe, it, expect, vi } from "vitest";
import { mount } from "@vue/test-utils";
import LoginForm from "../LoginForm.vue";
describe("LoginForm", () => {
it("submits credentials when form is valid", async () => {
const wrapper = mount(LoginForm);
await wrapper.find('input[name="email"]').setValue("user@example.com");
await wrapper.find('input[name="password"]').setValue("s3cret!");
await wrapper.find("form").trigger("submit");
expect(wrapper.emitted("submit")).toBeTruthy();
expect(wrapper.emitted("submit")![0]).toEqual([
{ email: "user@example.com", password: "s3cret!" },
]);
});
it("shows validation errors for empty fields", async () => {
const wrapper = mount(LoginForm);
await wrapper.find("form").trigger("submit");
expect(wrapper.text()).toContain("Email is required");
expect(wrapper.text()).toContain("Password is required");
expect(wrapper.emitted("submit")).toBeFalsy();
});
it("disables submit button while loading", async () => {
const wrapper = mount(LoginForm, {
props: { loading: true },
});
const button = wrapper.find('button[type="submit"]');
expect(button.attributes("disabled")).toBeDefined();
expect(button.text()).toBe("Signing in...");
});
it("renders slot content in the footer", () => {
const wrapper = mount(LoginForm, {
slots: {
footer: '<a href="/forgot">Forgot password?</a>',
},
});
expect(wrapper.find("a").text()).toBe("Forgot password?");
expect(wrapper.find("a").attributes("href")).toBe("/forgot");
});
});
Testing composables:
// composables/__tests__/useFetch.test.ts
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { ref, nextTick } from "vue";
import { useFetch } from "../useFetch";
describe("useFetch", () => {
beforeEach(() => {
vi.stubGlobal("fetch", vi.fn());
});
afterEach(() => {
vi.restoreAllMocks();
});
it("fetches data on mount when immediate is true", async () => {
const mockData = { id: 1, name: "Product" };
vi.mocked(fetch).mockResolvedValueOnce({
ok: true,
json: () => Promise.resolve(mockData),
} as Response);
const { data, loading, error } = useFetch<typeof mockData>("/api/products/1");
expect(loading.value).toBe(true);
await vi.waitFor(() => expect(loading.value).toBe(false));
expect(data.value).toEqual(mockData);
expect(error.value).toBeNull();
});
it("sets error on network failure", async () => {
vi.mocked(fetch).mockRejectedValueOnce(new Error("Network error"));
const { data, error, loading } = useFetch("/api/products/1");
await vi.waitFor(() => expect(loading.value).toBe(false));
expect(data.value).toBeNull();
expect(error.value?.message).toBe("Network error");
});
it("refetches when URL changes", async () => {
const url = ref("/api/products/1");
vi.mocked(fetch)
.mockResolvedValueOnce({
ok: true,
json: () => Promise.resolve({ id: 1 }),
} as Response)
.mockResolvedValueOnce({
ok: true,
json: () => Promise.resolve({ id: 2 }),
} as Response);
const { data } = useFetch<{ id: number }>(url);
await vi.waitFor(() => expect(data.value?.id).toBe(1));
url.value = "/api/products/2";
await vi.waitFor(() => expect(data.value?.id).toBe(2));
expect(fetch).toHaveBeenCalledTimes(2);
});
it("does not fetch when immediate is false", () => {
const { loading } = useFetch("/api/products", { immediate: false });
expect(fetch).not.toHaveBeenCalled();
expect(loading.value).toBe(false);
});
});
Testing with router and Pinia stores:
// pages/__tests__/ProductDetailPage.test.ts
import { describe, it, expect, vi, beforeEach } from "vitest";
import { mount } from "@vue/test-utils";
import { createTestingPinia } from "@pinia/testing";
import { createRouter, createMemoryHistory } from "vue-router";
import ProductDetailPage from "../ProductDetailPage.vue";
import { useProductStore } from "../../stores/useProductStore";
function createTestRouter() {
return createRouter({
history: createMemoryHistory(),
routes: [
{ path: "/products/:id", name: "product-detail", component: ProductDetailPage },
{ path: "/products", name: "products", component: { template: "<div />" } },
],
});
}
describe("ProductDetailPage", () => {
let router: ReturnType<typeof createTestRouter>;
beforeEach(async () => {
router = createTestRouter();
await router.push("/products/abc-123");
await router.isReady();
});
it("displays product details from the store", () => {
const wrapper = mount(ProductDetailPage, {
global: {
plugins: [
router,
createTestingPinia({
initialState: {
products: {
products: [
{ id: "abc-123", name: "Widget", price: 29.99, category: "tools", inStock: true },
],
},
},
}),
],
},
});
expect(wrapper.text()).toContain("Widget");
expect(wrapper.text()).toContain("29.99");
});
it("calls fetchProducts on mount if store is empty", () => {
const wrapper = mount(ProductDetailPage, {
global: {
plugins: [router, createTestingPinia({ stubActions: false })],
},
});
const store = useProductStore();
expect(store.fetchProducts).toHaveBeenCalled();
});
it("navigates back to product list on delete", async () => {
const wrapper = mount(ProductDetailPage, {
global: {
plugins: [
router,
createTestingPinia({
initialState: {
products: {
products: [
{ id: "abc-123", name: "Widget", price: 29.99, category: "tools", inStock: true },
],
},
},
}),
],
},
});
await wrapper.find('[data-testid="delete-button"]').trigger("click
…(truncated)