Vue Built-in Elements
Special components provided by Vue framework
🧩 What are Vue Built-in Elements?
Vue provides special built-in components like Transition, KeepAlive, Teleport, and Suspense that handle common UI patterns. These elements offer powerful functionality without requiring external libraries or complex custom implementations.
<!-- Simple Transition example -->
<Transition name="fade">
<p v-if="show">Hello Vue!</p>
</Transition>
Core Built-in Elements
Transition
Animate element enter/leave
<Transition name="slide">
<div v-if="visible">Content</div>
</Transition>KeepAlive
Cache component instances
<KeepAlive>
<component :is="view"></component>
</KeepAlive>Teleport
Render content elsewhere in DOM
<Teleport to="body">
<div class="modal">Modal</div>
</Teleport>Suspense
Handle async components
<Suspense>
<template #default>
<AsyncComp />
</template>
</Suspense>🔹 Transition Component
Add smooth animations when elements appear or disappear:
<template>
<button @click="show = !show">Toggle</button>
<Transition name="fade">
<p v-if="show">Hello from Vue!</p>
</Transition>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>Result:
Element fades in and out smoothly when toggled
🔹 KeepAlive Component
Preserve component state when switching between components:
<template>
<button @click="current = 'CompA'">Show A</button>
<button @click="current = 'CompB'">Show B</button>
<KeepAlive>
<component :is="current"></component>
</KeepAlive>
</template>
<script setup>
import { ref } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'
const current = ref('CompA')
</script>Use Case: Tabs, multi-step forms, or any scenario where you want to preserve user input when switching views.
🔹 Teleport Component
Render content in a different part of the DOM tree:
<template>
<div class="app">
<h1>My App</h1>
<!-- Modal will render in body, not here -->
<Teleport to="body">
<div class="modal" v-if="showModal">
<h2>Modal Title</h2>
<button @click="showModal = false">Close</button>
</div>
</Teleport>
</div>
</template>
<script setup>
import { ref } from 'vue'
const showModal = ref(false)
</script>Use Case: Modals, tooltips, notifications that need to escape parent container constraints.
🔹 Suspense Component
Show fallback content while async components load:
<template>
<Suspense>
<!-- Async component -->
<template #default>
<AsyncDashboard />
</template>
<!-- Loading state -->
<template #fallback>
<div>Loading dashboard...</div>
</template>
</Suspense>
</template>
<script setup>
import { defineAsyncComponent } from 'vue'
const AsyncDashboard = defineAsyncComponent(() =>
import('./Dashboard.vue')
)
</script>Result:
Shows "Loading dashboard..." until the component is ready
🔹 TransitionGroup
Animate lists of elements:
<template>
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item">
{{ item }}
</li>
</TransitionGroup>
</template>
<script setup>
import { ref } from 'vue'
const items = ref([1, 2, 3, 4, 5])
</script>
<style>
.list-enter-active, .list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from {
opacity: 0;
transform: translateX(30px);
}
</style>