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.