Vue 3 The template root requires exactly one element

Question

In Greet.vue

<template>
  <h2> Hello {{ name }} </h2>
</template>

<script>
export default {
    name: "Greet",
    props:['name']

};
</script>

In App.vue

<template>
  <Greet name="bruce"/>
  <Greet name="leo" />
  <Greet name="diana" />
  
</template>

<script>

import Greet from './components/Greet.vue'

export default {
  name: 'App',
  components: {
    Greet,
  }
}
</script>

First I encountered this problem. Then I follow it by.

"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

Now there is no error. But now there is only one Hello displayed in the browser. I should expect 3.

Answer 1

App.vue

<template>
  <div>
    <Greet name="bruce"/>
    <Greet name="leo" />
    <Greet name="diana" />
  <div>
</template>

<script>

import Greet from './components/Greet.vue'

export default {
  name: 'App',
  components: {
    Greet,
  }
}
</script>

The above will solve template root requires exactly one element, while these vetur configurations only disable some code checks.

"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

Answer 2

This occurs when the vetur extension cannot determine the version of Vue as it cannot resolve package.json.

The docs at https://vuejs.github.io/vetur/ state that if Vetur cannot find package.json and determine the version of Vue, it assumes 2.5. This is what generates the wrong error. Vue3 can have more than one element.

It is expecting to find this at the project root - ie where you open your editor. Try opening you editor so that package.json sits exactly on the first level. You do not need to adjust Vetur settings.