Inefficient Mounting of Components with Root Transitions in Vue 3

[jinyongp]

In Vue 2, it was possible to use v-if with root transitions in components, but in Vue 3, this is no longer supported. Instead, a prop must be used to control the mounting state. However, this approach can be inefficient when there are multiple components with root transitions on the same page, as all components will be mounted when the page loads. Is there any other alternatives?

[chenxch]

You can write as only one root node.

[nimatrengo]

Ideally, it is best practice to handle the isLoaded state with a ref,
You can use onBeforeMount if you want to check if the component has been initiated before DOM draws, or use onMounted to check if the component has been mounted completely, and wrap your component with a BaseLayout (or any kind other wrappers) component.

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

const isLoaded = ref(false)

onMounted(() => {
  isLoaded.value = true
})
</script>

<BaseLayout v-if="isLoaded">
    <template>
       <div> Loaded </div>
    </template>
</BaseLayout>