Nuxt tree missmatch

Describe the bug

Happening since 2.15.0.

<b-card no-body class="text-center">
  <div class="bg-secondary text-light">
      This is some content without the default <samp>&lt;b-card-body&gt;</samp> section. Notice the
      lack of padding between the card's border and this gray <samp>&lt;div&gt;</samp>.
  </div>
</b-card>

Vue throws:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.

Expected behavior

You can also see that the SSR content is empty but then hydrates later.

Versions

Libraries:

• BootstrapVue: 2.15.0
• Bootstrap: 4.5.0
• Vue: 2.6.11
• Nuxt: 2.12.2

Environment:

• OS: Ubuntu
• Browser: Chrome
• Version: 83.0.4103.61

Demo link

https://codesandbox.io/s/admiring-fast-tdx6c?file=/pages/index.vue

[jakubornass]

I can confirm the same issue happening for me since bootstrap-vue@2.15.0. And I can also confirm the above fix works, thanks @ashwinkshenoy .

[ashwinkshenoy]

I kinda fixed this issue:

My code Before fix:

<b-dropdown id="dropdown-1" class="header-menu__dropdown" text="Features">
    <b-dropdown-item to="/social-media-campaigns">Social Media</b-dropdown-item>
</b-dropdown>

My code After fix:

<b-dropdown id="dropdown-1" class="header-menu__dropdown">
    <template v-slot:button-content>
        Features
    </template>
   <b-dropdown-item to="/social-media-campaigns">Social Media</b-dropdown-item>
</b-dropdown>

Not sure why the text prop on b-dropdown, is creating the issue. Hope this helps as a workaround till the fix!