Mientras trabaja en un componente de VueJS, se encuentra con el siguiente error en la consola de su navegador (o en la salida de JS linter):

La plantilla de componente debe contener exactamente un elemento raíz. Si usa v-if en varios elementos, use v-else-if para encadenarlos.

Como se explicó, las plantillas de componentes de VueJS pueden contener uno y solo un nodo raíz. Esto es correcto:

 <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template>

Esto no es:

 <template> <div class="hola"> <h1>{{ msg }}</h1> </div> <div class="hello"> <h1>{{ msg }}</h1> </div> </template>

Arreglar Envuelva sus etiquetas html en un elemento principal:

 <template> <div> <div class="hola"> <h1>{{ msg }}</h1> </div> <div class="hello"> <h1>{{ msg }}</h1> </div> </div> </template>

Yendo más allá En algunos casos, no puede darse el lujo de agregar un elemento principal adicional sin romper la estructura HTML. Por ejemplo, si la plantilla de su componente secundario reemplaza varios <tr> en una tabla HTML principal:

 <template> <tr class="hola"> ... </tr> <tr class="hello"> ... </tr> </template>

En este caso específico, necesita tener dos soluciones:

utilizar componentes funcionales; use Fragmentos (mi favorito) Los fragmentos le permiten agrupar varios elementos secundarios debajo de un elemento principal sin agregar nodos adicionales al DOM en el renderizado. Hay un paquete vue-fragment que puede instalar:

 npm install vue-fragments // yarn add vue-fragments

Mientras carga VueJS:

 import { Plugin } from "vue-fragments"; Vue.use(Plugin);

Luego, en su plantilla de componente:

 <template> <v-fragment> <tr class="hola"> ... </tr> <tr class="hello"> ... </tr> <v-fragment> </template>