CODEWITHSUNDEEP
vue.jsvuejs2bootstrap-vuebuefy
als9xd
als9xd

Reputation: 854

Buefy/BoostrapVue namespace conflict

I am trying to use buefy's b-table component at the same time using BootrapVue. I'm guess that BootstrapVue has a component named b-table as well which is causing a confict and resulting in buefy's table not working correctly. When I remove BootstrapVue the Buefy table displays correctly. I'm new the vue and I'm not sure how to resolve namespace conflicts like this or if it is even possible.

main.js

import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);

import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
Vue.use(Buefy)

MetadataTable.js

<template>
  <div>
    <!-- BootstrapVue -->
    <b-modal id="metadata-modal" title="Metadata" size="lg">
      <p class="my-4">
        <table style="text-align:left">
          <tbody>
            <tr v-for="(value,key) in current_metadata">
              <td style="vertical-align:top;font-weight:bold;">{{key}}&nbsp</td>
              <td><code><pre>{{JSON.stringify(value, null, 2)}}</pre></code></td>
            </tr>
          </tbody>
        </table>
      </p>
    </b-modal>
    <!-- Buefy -->
    <b-table
        :data="data"
        paginated
    >
      <template slot-scope="props">
          <b-table-column field="metadata.title" label="Title" sortable>
              {{ props.row.metadata.title }}
          </b-table-column>
      </template>
    </b-table>
  </div>
</template>

Upvotes: 5

Views: 887

Answers (1)

Irina Potapova
Irina Potapova

Reputation: 794

You can import only specific modules from BootstrapVue that needed to your project rather than importing all of the bootstrap-vue components:

import bModal from 'bootstrap-vue'
import bAlert from 'bootstrap-vue'
Vue.component('b-modal', bModal)
Vue.component('b-alert', bAlert)

Hope it will fix b-table conflict.

Upvotes: 2

Related Questions