Cannot call a class as a function

[fadighattas100]

when trying to call BootstrapTable in nvu using laravel it return

Uncaught TypeError: Cannot call a class as a function

app.js

window.Vue = require('vue');
import BootstrapVue from 'bootstrap-vue';
import BootstrapTable from 'bootstrap-table';

import { Form, HasError, AlertError } from 'vform';

Vue.use(BootstrapVue);
Vue.use(BootstrapTable);

<template>

    <b-container class="bv-example-row">
        <b-row>
            <b-col class="">

                <BootstrapTable
                        ref="table"
                        :columns="columns"
                        :data="data"
                        :options="options"
                />
            </b-col>
        </b-row>

    </b-container>
</template>

<script>

    export default {

        data() {
            return {
                columns: [
                    {
                        title: 'Item ID',
                        field: 'id'
                    },
                    {
                        field: 'name',
                        title: 'Item Name'
                    }, {
                        field: 'price',
                        title: 'Item Price'
                    }
                ],
                data: [
                    {
                        id: 1,
                        name: 'Item 1',
                        price: '$1'
                    },
                    {
                        id: 2,
                        name: 'Item 2',
                        price: '$2'
                    },
                    {
                        id: 3,
                        name: 'Item 3',
                        price: '$3'
                    },
                    {
                        id: 4,
                        name: 'Item 4',
                        price: '$4'
                    },
                    {
                        id: 5,
                        name: 'Item 5',
                        price: '$5'
                    }
                ],
                options: {
                    search: true,
                    showColumns: true
                }

            }
        },

    }
    </script>

[wenzhixin]

https://bootstrap-table.com/docs/vuejs/webpack/ https://github.com/wenzhixin/bootstrap-table-examples/tree/develop/vue-starter

[wenzhixin]

Have you solved your problem?

[wenzhixin]

Close this issue because there is no response in 7 days if the problem exists reopen it and provide more information, thanks!

[mihalikv]

For other people resolving this problem in Vue, you need to use following import:

import 'bootstrap-table/dist/bootstrap-table.js'
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js';
Vue.component("BootstrapTable", BootstrapTable);

[fadighattas100]

make sure you have

   window.Popper = require('popper.js').default;
   window.$ = window.jQuery = require('jquery');

in application bootstrap,js because im using laravel vue templet or simple in app,js or any js file that load libs

then in the app.js

import 'bootstrap-table/dist/bootstrap-table.js';
window.BootstrapTable = require('bootstrap-table/dist/bootstrap-table-vue.esm.js').default;

Vue.component("BootstrapTable", BootstrapTable);

for the css in my app.sass file i added

@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~bootstrap-table/dist/bootstrap-table.min.css';

[fadighattas100]

@wenzhixin

https://bootstrap-table.com/docs/vuejs/webpack/ https://github.com/wenzhixin/bootstrap-table-examples/tree/develop/vue-starter

not so much