Pulse
ae39e45460
NOVAS SKILLS: - next-best-practices v0.1.0 (CLEAN) — Next.js App Router, RSC, caching, data - nextjs-patterns v1.0.0 (CLEAN) — Next.js 15: Server Actions, route handlers - vite v1.0.0 (CLEAN) — env vars, aliases, proxy, CJS compat - uncle-bob v1.0.0 (CLEAN) — Clean Code, SOLID, Clean Architecture - clean-code-review v1.0.0 (CLEAN) — naming, guard clauses, anti-patterns, refactoring - vue v1.0.0 (CLEAN) — Vue framework - vue-composition-api-best-practices v1.0.0 (CLEAN) — composables, Pinia, reactivity BIBLIOTECA INTELIGENTE libs/ (10 dominios, 11 arquivos): - typescript/ — TS safe + generics gotchas - react/ — Next.js App Router + Vite config - vue/ — Composition API + Pinia - linux/ — System diagnostic cheatsheet - database/ — PostgreSQL + MySQL patterns - browser/ — Chromium CLI + E2E testing - security/ — SAST audit (OWASP Top 10) - best-practices/ — Clean Code + SOLID + Clean Architecture - deploy/ — Docker multi-stack + OpenClaw ops - + INDEX.md como guia de navegacao .learnings/ — LRN-20260519-003 criado (biblioteca compartilhada)
2.2 KiB
2.2 KiB
Component Patterns
Props Best Practices
- Type your props:
defineProps<{msg: string, count?: number}>() - Required props have no
?—TypeScript enforces - Default values:
withDefaults(defineProps<Props>(), {count: 0}) - Props are readonly—never mutate, emit event to parent instead
Emit Patterns
- Type your emits:
defineEmits<{(e: 'update', value: string): void}>() - Emit returns boolean if event handler returns false
- Vue 3.3+ shorthand:
defineEmits<{update: [value: string]}>() - Always emit for changes—maintain one-way data flow
v-model Patterns
v-model=:modelValue+@update:modelValue- Multiple v-model:
v-model:title,v-model:content—different props defineModel()(3.4+) creates ref that syncs automatically—much simpler- v-model modifiers:
.trim,.number,.lazy—access viamodelModifiers
Slots Patterns
- Default slot:
<slot></slot>—or<slot>fallback content</slot> - Named slots:
<slot name="header">+<template #header> - Scoped slots:
<slot :item="item">+<template #default="{item}"> $slots.header?.()to check if slot provided
Dynamic Components
<component :is="componentName">—switch between components<KeepAlive>preserves state when switching—cached in memoryinclude/excludeprops on KeepAlive—control which are cachedmaxprop limits cache size—LRU eviction
Async Components
defineAsyncComponent(() => import('./Comp.vue'))—lazy loading- Loading component:
loadingComponentoption—shown while loading - Error component:
errorComponentoption—shown on load failure - Combine with
<Suspense>for coordinated loading states
Teleport
<Teleport to="body">—render content outside component tree- Useful for modals, dropdowns, tooltips—need to escape overflow/z-index
disabledprop for conditional teleporting- Events still bubble in Vue component tree—not DOM tree
Provide/Inject
provide('key', value)in ancestor—available to all descendantsinject('key', defaultValue)to receive- Provide reactive value for reactive inject—
provide('count', ref(0)) - Symbol keys for type safety—avoid string collisions