Built-in Components

Transition

<Transition> : It can be used to apply enter and leave animations on elements or components passed to it via its default slot.

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <button @click="show = !show">Toggle</button>
  <Transition>
    <p v-if="show">hello</p>  // Applied fade transition
  </Transition>
</template>

<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

Try it in the Playground

Using Javascript Hooks

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"       
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
  <!-- ... -->
</Transition>

TransitionGroup

<TransitionGroup>: It is designed for animating the insertion, removal, and order change of elements or components that are rendered in a list.

<template>
  <button @click="insert">insert at random index</button>
  <button @click="reset">reset</button>

  <TransitionGroup tag="ul" name="list" class="container">
    <li v-for="item in items" class="item" :key="item">
      {{ item }}
    </li>
  </TransitionGroup>
</template>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

Try it in the Playground

KeepAlive

<KeepAlive>: It allows us to conditionally cache component instances when dynamically switching between multiple components.

App.vue

<script setup>
  import { shallowRef } from 'vue'
  import CompA from './CompA.vue'
  import CompB from './CompB.vue'

  const current = shallowRef(CompB)
</script>

<template>
  <div class="demo">
    <label><input type="radio" v-model="current" :value="CompA" /> A</label>
    <label><input type="radio" v-model="current" :value="CompB" /> B</label>
    <KeepAlive>
      <component :is="current"></component>
    </KeepAlive>
  </div>
</template>

CompA.vue

<script setup>
  import { ref } from 'vue'

  const count = ref(0)
</script>

<template>
  <p>Current component: A</p>
  <span>count: {{ count }} </span>
  <button @click="count++">Increase Count</button>
</template>

CompB.vue

<script setup>
  import { ref } from 'vue'

  const msg = ref('')
</script>

<template>
  <p>Current component: B</p>
  <span>Message is: </span>
  <input v-model="msg">
</template>

Try it in the Playground

Teleport

The <teleport> component in Vue.js allows you to render a component's HTML in a different part of the DOM than where the component is declared.

<Teleport to="body">
  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</Teleport>

Suspense

<Suspense> is a built-in component for orchestrating async dependencies in a component tree. It can render a loading state while waiting for multiple nested async dependencies down the component tree to be resolved.

<template>
  <Suspense>
    <!-- component with nested async dependencies -->
    <Dashboard />

    <!-- loading state via #fallback slot -->
    <template #fallback>
      Loading...
    </template>
  </Suspense>
</template>

Combining Suspense with other components

<template>
  <RouterView v-slot="{ Component }">
    <template v-if="Component">
      <Transition mode="out-in">
        <KeepAlive>
          <Suspense>
            <!-- main content -->
            <component :is="Component"></component>

            <!-- loading state -->
            <template #fallback>
              Loading...
            </template>
          </Suspense>
        </KeepAlive>
      </Transition>
    </template>
  </RouterView>
</template>