Vue problem with table components and bootrstrap-CodePudding

I have a problem with component and bootstrap-vue, even though everything is installed, when I use default example from documentation:

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

Nothing is being rendered on the page. Version of my packages are:

"vue": "^2.6.12",
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",

Thanks in advance.

EDIT: This is the whole main.js file

import Vue from 'vue'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'
import parser from 'socket.io-msgpack-parser';
import vueConfig from '../vue.config';
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

const ws = 'http://localhost:3000';
export const SocketInstance = io(ws, { transports: ['websocket'], parser, query: {admin: true }});

Vue.use(new VueSocketIO({connection: SocketInstance}), SocketInstance, BootstrapVue);

Vue.config.productionTip = false;
Vue.config.devtools = true;

new Vue({
  render: h => h(App),
}).$mount('#app')

I couldn't use every single line from component but mostly this is it. Regarding App.vue it looks totaly like some default App.vue - just with name of my component.

<template>
  <div >
    <span >
      <h3>
        <i  style="margin-right: 10px"></i>
        {{ textData.classVitals }}
      </h3>
    </span>
    <br>
    <br>

    <template>
    <div>
      <b-table striped hover :items="items"></b-table>
    </div>
  </template>
  <h3 style="padding-bottom: 5px">{{ textData.teacherTable }}</h3>
</div>
</template>
import TeacherClassesModal from "./TeacherClassesModal.vue";
import TimeRangeModal from "./TimeRangeModal.vue";
import axios from "axios";
import Spinner from "vue-simple-spinner";


export default {
  name: "TeacherMonitoring",
  components: {
    showClasses: TeacherClassesModal,
    showTimeRange: TimeRangeModal,
    Spinner,
  },
  props: {
    msg: String,
  },
  data() {
    return {
    fields: ['first_name', 'last_name', 'age'],
    items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { age: 38, first_name: 'Jami', last_name: 'Carney' }
      ],
    labels: [
      { text: 'ID', field: 'id' },
      { text: 'Name', field: 'name' },
      { text: 'Created', field: 'date_created' },
    ]
  }

CodePudding user response：

If you look at the element in the console, you see that it is not processed by Vue, it is still a b-table tag. This is not an element the DOM can render. This means probably that Vue cannot find the component.

I think this might be because in your main.js you do not load the plugin BootstrapVue the right way. Now you put it as an option to the VueSocketIO plugin. This line:

Vue.use(new VueSocketIO({connection: SocketInstance}), SocketInstance, BootstrapVue);

Should be:

Vue.use(new VueSocketIO({connection: SocketInstance}), SocketInstance);
Vue.use(BootstrapVue);

Hope this helps.

CodePudding user response：

Does your main.js look something like this?

import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import 'bootstrap/dist/css/bootstrap.css';

Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')