[Vuejs]-Vue.js component is a fragment instance

0👍

That is a specific behavior documented here as #4: https://vuejs.org/guide/components.html#Fragment-Instance

Unsure of the exact reasoning behind it, but likely has to do with the fact the entire thing will be just swapped out in most cases (all cases in v2). Simple correction is to have an outer div that holds your router-view

EDIT:

Try this instead of your current version to ensure it even has anything to do with the code you’ve pasted or if it is the view being routed to…

<main>
    <div>Howdy</div>
</main>

If that works, and obviously it should, what is the body of your view that is loading?

EDIT2:

Oh, i think i see now from the console output bit, your view itself must have exactly one parent element. So really you need to do two things, the div wrapper before your router-view and a div wrapper of inside your actual view. Think of it this way, the stuff inside the template tag is essentially copy and pasted over top of (and completely removing) the router-view tags. When that happens there should only ever be ONE parent element in a component. The part that threw me long ago is that the template tag is NOT an element in that regard.

Leave a comment