How to use Vue Transition Component without v-if
In this article we want to explore how we can use vue transition component without using v-if by using v-show.
Introduction
As you know Vue has 2 built-in components (
Most
While
works well, it completely removes elements from the DOM, which can sometimes lead to unnecessary re-rendering and performance overhead and also SEO issues.v-if
The Typical Way to use Transition Component
The typical pattern involves conditionally rendering an element using
When the
<!-- Traditional Approach with v-if -->
<template>
<div>
<button @click="show = !show">Toggle Element</button>
<!-- we named the transition so instead of v-leave-to we refer to fade-leave-to -->
<Transition name="fade">
<div v-if="show">
<p>I'm here!</p>
</div>
</Transition>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const show = ref(false)
</script>
<style>
.fade-enter-active,
.fade-leave-active {
opacity: 1;
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0.01;
transition: opacity 0.5s ease;
}
</style>
Problem
But the problem is that
What we can do?
Short answer: set
What if we want to have default value of
That's when
Better Approach: Using v-show with appear
prop helps us to apply transition on the initial render.appear
<template>
<div>
<button @click="show = !show">Toggle Element</button>
<transition name="fade" appear>
<div v-show="show">
<p>I'm here!</p>
</div>
</transition>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const show = ref(false)
</script>
<style>
.fade-appear-active,
.fade-enter-active,
.fade-leave-active {
opacity: 1;
transition: opacity 0.5s ease;
}
.fade-appear-from,
.fade-enter-from,
.fade-leave-to {
opacity: 0.01;
transition: opacity 0.5s ease;
}
</style>
Now we have
The key difference is how they handle element rendering:
- completely removes the element from the DOM when the condition is falsev-if
- simply toggles the CSSv-showproperty, keeping the element in the DOMdisplay
- has higher toggle costs but lower initial render costsv-if
- has lower toggle costs but slightly higher initial render costsv-show
Choose
- The condition rarely changes
- You want to save resources by not rendering unnecessary elements
- The element won't be toggled frequently
- You're working with heavy components that shouldn't be kept in memory
Choose
- The element will be toggled frequently
- You want to maintain the element's state
- Performance of quick toggling is more important
- You need smoother animations
Yes, You can combine multiple CSS classes and properties:
<template>
<Transition
appear
appear-class="custom-appear"
appear-active-class="active-appear"
appear-to-class="to-appear">
<div v-show="isVisible">
Complex Transition Content
</div>
</Transition>
</template>
This allows granular control over initial render animations, letting you define specific classes for different stages of the appear transition.
- triggers full component destruction and re-creationv-if
- Calls andbeforeUnmounthooksunmounted
- Completely reinitializes the component on re-render
- keeps the component instance alivev-show
- Only toggles visibility
- Maintains component state and avoids unnecessary re-initialization
- More efficient for frequently toggled elements
For complex scenarios, and performance optimization consider using the
<template>
<Transition name="fade">
<div v-if="shouldRender" v-show="isVisible">
Optimized Conditional Content
</div>
</Transition>
</template>
- Prevents initial rendering of unnecessary elements ()v-if
- Provides smooth toggling ()v-show
- Minimizes unnecessary DOM manipulations and re-creation.