1---
2name: advanced-patterns
3description: Vue 3 built-in components (Transition, Teleport, Suspense, KeepAlive) and advanced directives
4---
5 
6# Built-in Components & Directives
7 
8## Transition
9 
10Animate enter/leave of a single element or component.
11 
12```vue
13<template>
14  <Transition name="fade">
15    <div v-if="show">Content</div>
16  </Transition>
17</template>
18 
19<style>
20.fade-enter-active, .fade-leave-active {
21  transition: opacity 0.3s ease;
22}
23.fade-enter-from, .fade-leave-to {
24  opacity: 0;
25}
26</style>
27```
28 
29### CSS Classes
30 
31| Class | When |
32|-------|------|
33| `{name}-enter-from` | Start state for enter |
34| `{name}-enter-active` | Active state for enter (add transitions here) |
35| `{name}-enter-to` | End state for enter |
36| `{name}-leave-from` | Start state for leave |
37| `{name}-leave-active` | Active state for leave |
38| `{name}-leave-to` | End state for leave |
39 
40### Transition Modes
41 
42```vue
43<!-- Wait for leave to complete before enter -->
44<Transition name="fade" mode="out-in">
45  <component :is="currentView" />
46</Transition>
47```
48 
49### JavaScript Hooks
50 
51```vue
52<Transition
53  @before-enter="onBeforeEnter"
54  @enter="onEnter"
55  @after-enter="onAfterEnter"
56  @leave="onLeave"
57  :css="false"
58>
59  <div v-if="show">Content</div>
60</Transition>
61 
62<script setup lang="ts">
63function onEnter(el: Element, done: () => void) {
64  // Animate with JS library
65  gsap.to(el, { opacity: 1, onComplete: done })
66}
67</script>
68```
69 
70### Appear on Initial Render
71 
72```vue
73<Transition appear name="fade">
74  <div>Shows with animation on mount</div>
75</Transition>
76```
77 
78## TransitionGroup
79 
80Animate list items. Each child must have a unique `key`.
81 
82```vue
83<template>
84  <TransitionGroup name="list" tag="ul">
85    <li v-for="item in items" :key="item.id">
86      {{ item.text }}
87    </li>
88  </TransitionGroup>
89</template>
90 
91<style>
92.list-enter-active, .list-leave-active {
93  transition: all 0.3s ease;
94}
95.list-enter-from, .list-leave-to {
96  opacity: 0;
97  transform: translateX(30px);
98}
99/* Move animation for reordering */
100.list-move {
101  transition: transform 0.3s ease;
102}
103</style>
104```
105 
106## Teleport
107 
108Render content to a different DOM location.
109 
110```vue
111<template>
112  <button @click="open = true">Open Modal</button>
113  
114  <Teleport to="body">
115    <div v-if="open" class="modal">
116      Modal content rendered at body
117    </div>
118  </Teleport>
119</template>
120```
121 
122### Props
123 
124```vue
125<!-- CSS selector -->
126<Teleport to="#modal-container">
127 
128<!-- DOM element -->
129<Teleport :to="targetElement">
130 
131<!-- Disable teleport conditionally -->
132<Teleport to="body" :disabled="isMobile">
133 
134<!-- Defer until target exists (Vue 3.5+) -->
135<Teleport defer to="#late-rendered-target">
136```
137 
138## Suspense
139 
140Handle async dependencies with loading states. **Experimental feature.**
141 
142```vue
143<template>
144  <Suspense>
145    <template #default>
146      <AsyncComponent />
147    </template>
148    <template #fallback>
149      <div>Loading...</div>
150    </template>
151  </Suspense>
152</template>
153```
154 
155### Async Dependencies
156 
157Suspense waits for:
158- Components with `async setup()`
159- Components using top-level `await` in `<script setup>`
160- Async components created with `defineAsyncComponent`
161 
162```vue
163<!-- AsyncComponent.vue -->
164<script setup lang="ts">
165const data = await fetch('/api/data').then(r => r.json())
166</script>
167```
168 
169### Events
170 
171```vue
172<Suspense
173  @pending="onPending"
174  @resolve="onResolve"
175  @fallback="onFallback"
176>
177  ...
178</Suspense>
179```
180 
181## KeepAlive
182 
183Cache component instances when toggled.
184 
185```vue
186<template>
187  <KeepAlive>
188    <component :is="currentTab" />
189  </KeepAlive>
190</template>
191```
192 
193### Include/Exclude
194 
195```vue
196<!-- By name (string or regex) -->
197<KeepAlive include="ComponentA,ComponentB">
198<KeepAlive :include="/^Tab/">
199<KeepAlive :include="['TabA', 'TabB']">
200 
201<!-- Exclude -->
202<KeepAlive exclude="ModalComponent">
203 
204<!-- Max cached instances -->
205<KeepAlive :max="10">
206```
207 
208### Lifecycle Hooks
209 
210```ts
211import { onActivated, onDeactivated } from 'vue'
212 
213onActivated(() => {
214  // Called when component is inserted from cache
215  fetchLatestData()
216})
217 
218onDeactivated(() => {
219  // Called when component is removed to cache
220  pauseTimers()
221})
222```
223 
224## v-memo
225 
226Skip re-renders when dependencies unchanged. Use for performance optimization.
227 
228```vue
229<template>
230  <div v-for="item in list" :key="item.id" v-memo="[item.selected]">
231    <!-- Only re-renders when item.selected changes -->
232    <ExpensiveComponent :item="item" />
233  </div>
234</template>
235```
236 
237Equivalent to `v-once` when empty:
238```vue
239<div v-memo="[]">Never updates</div>
240```
241 
242## v-once
243 
244Render once, skip all future updates.
245 
246```vue
247<span v-once>Static: {{ neverChanges }}</span>
248```
249 
250## Custom Directives
251 
252Create reusable DOM manipulations.
253 
254```ts
255// Directive definition
256const vFocus: Directive<HTMLElement> = {
257  mounted: (el) => el.focus()
258}
259 
260// Full hooks
261const vColor: Directive<HTMLElement, string> = {
262  created(el, binding, vnode, prevVnode) {},
263  beforeMount(el, binding) {},
264  mounted(el, binding) {
265    el.style.color = binding.value
266  },
267  beforeUpdate(el, binding) {},
268  updated(el, binding) {
269    el.style.color = binding.value
270  },
271  beforeUnmount(el, binding) {},
272  unmounted(el, binding) {}
273}
274```
275 
276### Directive Arguments & Modifiers
277 
278```vue
279<div v-color:background.bold="'red'">
280 
281<script setup lang="ts">
282const vColor: Directive<HTMLElement, string> = {
283  mounted(el, binding) {
284    // binding.arg = 'background'
285    // binding.modifiers = { bold: true }
286    // binding.value = 'red'
287    el.style[binding.arg || 'color'] = binding.value
288    if (binding.modifiers.bold) {
289      el.style.fontWeight = 'bold'
290    }
291  }
292}
293</script>
294```
295 
296### Global Registration
297 
298```ts
299// main.ts
300app.directive('focus', {
301  mounted: (el) => el.focus()
302})
303```
304 
305<!--
306Source references:
307- https://vuejs.org/api/built-in-components.html
308- https://vuejs.org/guide/built-ins/transition.html
309- https://vuejs.org/guide/built-ins/teleport.html
310- https://vuejs.org/guide/built-ins/suspense.html
311- https://vuejs.org/guide/built-ins/keep-alive.html
312- https://vuejs.org/api/built-in-directives.html
313- https://vuejs.org/guide/reusability/custom-directives.html
314-->
315