I am upgrading vue2 to vue3 and I get the folowing warning in my console :

[Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended. at <VNavigationDrawer modelValue=false onUpdate:modelValue=fn app="" > at <SideBar> at <VApp id="inspire" > at <App>

does anyone have any ideas?

I am upgrading vue2 to vue3 and I get the folowing warning in my console :

[Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended. at <VNavigationDrawer modelValue=false onUpdate:modelValue=fn app="" > at <SideBar> at <VApp id="inspire" > at <App>

does anyone have any ideas?

• javascript
• vue.js
• vuejs3

• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Jun 7, 2023 at 4:23

3 Answers 3

First node in the <template> must be a div (or some other valid element, but div works for me, so...)

<template>
    <div>
        ...
    </div>
</template>

If you add something else into <template> but outside of the wrapping <div>, this error occurs.

I do not know what, if any, offending nodes may be, but I do know that adding something between closing </div> and closing </template> triggers this error.

I had this error appear with the following structure:

<template>
  <div />
  <CustomComponent /> // vue was not happy with this
</template>

For me, moving the CustomComponent out to the parent solved the error. So it can appear when there is more than one root node as well. :)

I don't (entirely) agree with the answers Suki & Predrag provided. In Vue3 you are free to add one or multiple parent nodes in the html template and this can be tags of your choice - as opposed to Vue2:

<!-- Valid Vue3 syntax -->
<template>
 <td id="td-1">Foo<td>
 <td id="td-2">Bar</td>
</template>

But that's not the real issue here. It is true that you get this error when using a Runtime directive, such as v-show, in the parent component, combined with such a syntax. In my case the warning occured when I tried to handle the appearing of a Quasar button in my parent component:

<!-- Parent component -->
<template>
 <my-child-component v-show="shouldShowComponent()" v-bind="myProps" />
</template>

<!-- MyChildComponent.vue -->
<template>
 <q-btn>Baz</q-btn>
</template>

[Vue warn]: Runtime directive used on component with non-element root node.

Which I then fixed by moving the v-show, in my case to the child component (but could also be to a parent div in the parent component):

<!-- MyChildComponent.vue -->
<template>
  <q-btn v-show="showThisBtn()">...</q-btn>
</template>

Hope this helps.