Buefy/BoostrapVue namespace conflict

user_9548334 0
Viewed 759

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>
buefy bootstrap-vue vuejs2 vue.js
1 Answers

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.

user_84173450
Related