Roadmap › Vue.js 3 (with Pinia, Vue Router & Nuxt basics) › Module: Components
Lessons in this course (17)
11. Built-in components: Transition, KeepAlive, Teleport, Suspense
IntermediateMediumLesson 11 of 17
vue
<Transition name="fade"><p v-if="show">Hello</p></Transition> <!-- CSS classes fade-enter-from, fade-leave-to... -->
<TransitionGroup tag="ul" name="list"><li v-for="i in items" :key="i.id">{{ i.name }}</li></TransitionGroup>
<KeepAlive :include="['OrderList']" :max="10"> <!-- cache component instances (keep state) -->
<component :is="currentView" />
</KeepAlive>
<Teleport to="body"><Modal v-if="open" @close="open = false" /></Teleport> <!-- render elsewhere in the DOM -->
<Suspense> <!-- async setup / async components (experimental API) -->
<AsyncDashboard />
<template #fallback>Loading…</template>
</Suspense>Async components: defineAsyncComponent(() => import("./Reports.vue")) for code splitting.