Laravel+vue install problem.

Bootstraptable version(s) affected: "bootstrap-table": "^1.18.3",

Description
I can't add it to the VUE component on Laravel. Is there a documentation for Laravel+vue?

Example
app.js file:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

import Vue from "vue";
import VueFormulate from '@braid/vue-formulate'

import 'bootstrap-table/dist/bootstrap-table'
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue'

Vue.use(VueFormulate)

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component("BootstrapTable", BootstrapTable);
Vue.component("test-componenti", require('./components/testcomponenti.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});

bootstrap.js file:

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

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

    require('bootstrap');
    require('bootstrap-select');
    require('bootstrap-table');

} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else if(process.env.NODE_ENV != 'production'){
    console.error('CSRF token not found: ....');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     forceTLS: true
// });

testcomponenti.vue file:

<template>

    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title">Sort &amp; Format Column</h4>
                    <p class="sub-header mb-0">
                        Example of sort & format column.
                    </p>

                    <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>

                </div>
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div>
    <!-- end row-->

</template>

<script>
export default {
    name: "testcomponenti",
    data(){
        return{
            columns: [
                {
                    field: 'state',
                    checkbox: true
                },
                {
                    title: 'Item ID',
                    field: 'id'
                },
                {
                    field: 'name',
                    title: 'Item Name'
                },
                {
                    field: 'price',
                    title: 'Item Price'
                },
                {
                    field: 'action',
                    title: 'Actions',
                    align: 'center',
                    formatter: function () {
                        return '<a href="javascript:" class="like"><i class="fa fa-star"></i></a>'
                    },
                    events: {
                        'click .like': function (e, value, row) {
                            alert(JSON.stringify(row))
                        }
                    }
                }
            ],
            data: [
                {
                    id: 0,
                    name: 'Item 0',
                    price: '$0'
                },
                {
                    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
            }
        }
    },
    components: {
        'BootstrapTable': BootstrapTable
    },
}
</script>

<style scoped>

</style>

and error messages:

Uncaught TypeError: Cannot read property 'methods' of undefined at app.js:7073 at app.js:7101 at app.js:5755 at Object../node_modules/bootstrap-table/dist/bootstrap-table-vue.js (app.js:5757) at webpack_require__ (app.js:84267) at app.js:84351 at app.js:84396 at app.js:84398 (anonymous) @ app.js:7073 (anonymous) @ app.js:7101 (anonymous) @ app.js:5755 ./node_modules/bootstrap-table/dist/bootstrap-table-vue.js @ app.js:5757 webpack_require__ @ app.js:84267 (anonymous) @ app.js:84351 (anonymous) @ app.js:84396 (anonymous) @ app.js:84398

wenzhixin / bootstrap-table

Laravel+vue install problem. #5854