BootstrapVue <b-tabs> in a nuxt.js app is displaying contents of all tabs instead of just the active tab

I created a test nuxt.js app with BootstrapVue. I used <b-tabs>, but instead of contents of just the active tab, contents of all tabs are displayed on the page.

I have the <b-tabs> like this:

<template>
  <b-card no-body>
    <b-tabs card >
      <b-tab active title="A" no-body /><p>Content A</p></b-tab>
      <b-tab title="B" no-body /><p>Content B</p></b-tab>
      <b-tab title="C" no-body /><p>Content C</p></b-tab>
    </b-tabs>
  </b-card>
</template>

Regardless of which tab is selected, the page displays all the contents, like this:

Content A

Content B

Content C

However, if I remove the <p></p> tags from the above code, there are subtle differences in how the contents is displayed.

For first tab:

Content A Content B Content C

For second tab:

Content A

Content B Content C

For third tab:

Content A Content B

Content C

What can be the cause of this? I have used BootstrapVue in 'plain' Vue.js app and I didn't have such issues. I don't see anything in the docs either about any required styling.

Solution

I've tried it on my side, it was essentially an issue with tags closing.

<template>
  <b-card no-body>
    <b-tabs card>
      <b-tab active title="A" no-body><p>Content A</p></b-tab>
      <b-tab title="B" no-body><p>Content B</p></b-tab>
      <b-tab title="C" no-body><p>Content C</p></b-tab>
    </b-tabs>
  </b-card>
</template>

Try to use ESlint, it can greatly help you spot bugs in no time!