Nuxt - The template root requires exactly one element - vue.js

Question

I recently updated a few dependencies in a Nuxt based project I had a developer work on for me (I'm a designer with a very basic JS/vue knowledge-base). Now the build is spitting out the 'template root requires exactly one element' error. From searching other threads I can see the principle of what I need to change (contain everything in one element) but I'm just unsure how to do that with this files particular structure (v-if arrangement). I've included the offending file below and wondered if anyone could point me in the right direction? Much appreciated!
<template>
<nuxt-link
v-if="to"
:class="classes"
:to="to"
v-bind="inheritedProps"
v-on="$listeners"
>
<slot />
</nuxt-link>
<a
v-else-if="href"
:class="classes"
:href="href"
v-bind="inheritedProps"
v-on="$listeners"
>
<slot />
</a>
<button
v-else
:class="classes"
:type="type"
v-bind="inheritedProps"
v-on="$listeners"
>
<slot />
</button>
</template>
<script>
export default {
name: 'BaseButton',
props: {
block: {
type: Boolean,
default: false
},
variant: {
type: String,
default: () => {}
},
href: {
type: String,
default: () => {}
},
to: {
type: String,
default: () => {}
},
type: {
type: String,
default: () => {}
}
},
computed: {
inheritedProps () {
return {
...this.$props,
...this.$attrs
}
},
classes () {
return [
'btn',
{
'btn--block': this.block
}
].concat(this.modifiers)
},
modifiers () {
const modifiersArray = this.variant && this.variant.split(' ')
return this.variant ? modifiersArray.map(modifier => `btn--${modifier}`) : false
}
}
}
</script>

Answer 1

I'm a little surprised that you're seeing this error as Vue doesn't normally complain if you're using v-if/v-else-if/v-else like that. The template is guaranteed to output a single element when it runs, so usually Vue allows it. It may shed more light on what's going on if you include the exact error message in the question.
I suggest checking you aren't running into the problem discussed below, caused by incompatible library versions, which incorrectly reports this error:
https://github.com/vuejs/eslint-plugin-vue/issues/986
I really don't think there's anything wrong with your code, so I suggest investigating library versions before making any code changes.
Further, if it is just the linter that's complaining you could consider suppressing that rule. The Vue template compiler will shout soon enough if there's a real problem with multiple root nodes.
That said, if you really can't make the error message go away...
The simplest solution is just to wrap everything in an extra element at the root.
If you don't want to use a wrapper element (possibly because it interferes with your layout) you can use is to reduce down your template:
<template>
<component
:class="classes"
v-bind="childProps"
v-on="$listeners"
>
<slot />
</component>
</template>
<script>
export default {
// ... other stuff ...
computed: {
childProps () {
const childProps = {...this.inheritedProps}
if (this.to) {
childProps.is = 'nuxt-link'
childProps.to = this.to
} else if (this.href) {
childProps.is = 'a'
childProps.href = this.href
} else {
childProps.is = 'button'
childProps.type = this.type
}
return childProps
}
}
}
</script>
That said, you're almost in render function territory doing it this way.

Answer 2

you should wrap your all content under template into on root tag,just for example i have used div to wrap all html content under template. you can use any other tag based on your requirement.
you can use below solution
<template>
<div>
<nuxt-link
v-if="to"
:class="classes"
:to="to"
v-bind="inheritedProps"
v-on="$listeners"
>
<slot />
</nuxt-link>
<a
v-else-if="href"
:class="classes"
:href="href"
v-bind="inheritedProps"
v-on="$listeners"
>
<slot />
</a>
<button
v-else
:class="classes"
:type="type"
v-bind="inheritedProps"
v-on="$listeners"
>
<slot />
</button>
</div>
</template>