[Vuejs]-When not to use a div container in a template?

Vue3 started to support multi-root components. They have some limitations but it’s up to you to decide whether to use use them, for example you can make a basic page layout:

Layout.vue

<template>
<header>
  <div id="logo"></div>
  <!-- other common header elements -->
  <slot name="header"></slot>
</header>
<main>
  <nav>...</nav>
  <slot></slot>
</main>
<footer>
  <!-- common footer elements -->
  <slot name="footer"></slot>
</footer>
</template>
<style scoped>
/* style your header, main, footer here */
</style>