use <b-dropdown> in <b-collapse> cause DOM errors vue-bootstrap and nuxt js

Question

this is my code for nav menu :

<b-navbar toggleable="lg" class="navbar navbar-expand-lg navbar-light">
  <b-navbar-toggle target="nav-collapse" class="mx-auto my-0"></b-navbar-toggle>
  <b-collapse id="nav-collapse" is-nav>
    <b-navbar-nav>
        <b-nav-item to="/">home</b-nav-item>
    </b-navbar-nav>
    <b-dropdown id="dropdown-1" text="categories">

        <b-dropdown id="dropdown-2" :text="category.title" v-for="category in settings.categories" 
        :key="category.id">
            <b-dropdown-item :to="`/category/`+child.id+`/`+child.slug"  v-for="child in 
            category.childs" :key="child.id">{{ child.title }}</b-dropdown-item>
        </b-dropdown>
    </b-dropdown>
  </b-collapse>
</b-navbar>

but i get so many DOM error in nuxt . i'm using bootstrap-vue . i want to use "b-dropdown" in nav bar but it cause DOM errors . how can i get rid of these errors ?

why i'm using "b-dropdown" in wrong place ? well , see this question : bootstrap-vue multi level drop down

if i remove (b-dropdown id="dropdown-1" ... ) tag , errors will go away !

Answer 1

First of all, it's not an error, it's a warning. It has to do with that component not being compatible with SSR so the server side content doesn't match the client side.

You should try wrapping the code between <no-ssr/> tags and that should make it work fine.

<no-ssr>
<b-navbar toggleable="lg" class="navbar navbar-expand-lg navbar-light">
  <b-navbar-toggle target="nav-collapse" class="mx-auto my-0"></b-navbar-toggle>
  <b-collapse id="nav-collapse" is-nav>
    <b-navbar-nav>
        <b-nav-item to="/">home</b-nav-item>
    </b-navbar-nav>
    <b-dropdown id="dropdown-1" text="categories">

        <b-dropdown id="dropdown-2" :text="category.title" v-for="category in settings.categories" 
        :key="category.id">
            <b-dropdown-item :to="`/category/`+child.id+`/`+child.slug"  v-for="child in 
            category.childs" :key="child.id">{{ child.title }}</b-dropdown-item>
        </b-dropdown>
    </b-dropdown>
  </b-collapse>
</b-navbar>
<no-ssr/>

For more information check this github issue.