How can I wrap every v-if in my Vue code in a transition?

Question

The task of having to write

  
<transition name="fade">
    <div v-if="condition">

    </div>
</transition>

Is manual labour. Is there any shortcut way of wrapping every v-if with a transition?

Answer 1

You can create a custom Vue component:

// AppTransition.vue
<template>
<transition name='fade'>
  <div v-if='show'>
    <slot />
  </div>
</transition>
</template>

<script>
export default {
  props: {
    show: Boolean
  }
}
</script>

and then use it as follows:

<template>
  <AppTransition :show='condition'>
    <div>Hello, world</div>
  </AppTransition>
</template>

<script>
// You can avoid importing it everywhere by making it a global component, see https://vuejs.org/guide/components/registration.html
import AppTransition from './AppTransition'

export default {
  components: { AppTransition }
}
</script>