CODEWITHSUNDEEP
javascriptvue.jsvuejs3
jian
jian

Reputation: 4824

Vue 3 The template root requires exactly one element

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.

Upvotes: 1

Views: 3993

Answers (2)

atomscale
atomscale

Reputation: 111

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.

Upvotes: 2

Animeta
Animeta

Reputation: 1343

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,

Upvotes: 3

Related Questions