Multiple Root Elements aka. Fragments

In Vue 3, a component template can have multiple root elements:

<template>
  <div>Root 1</div>
  <div>Root 2</div>
</template>

In Vue 2, this simply isn't possible, so always use a single root element in your components.

Eslint

You can use eslint-plugin-vue to help you be consistent here:

// .eslintrc.js
rules: {
  'vue-no-multiple-template-root': 'error',
}

This rule is preconfigured in the VueBridge eslint config.