Support and usage on Vue 3

[manzanaverde]

Description

Some weeks ago I migrated an app with bootstrap table to Vue 3. For any reason, the table does not work anymore. I suspect the problem is that BT is not supported on Vue 3.

What I expected

Use BT in a component like

<BootstrapTable :columns="columns" :data="data" :options="options"></BootstrapTable>

What I got

Uncaught TypeError: Cannot read property 'fn' of undefined

What I've tried so far

• Followed the instructions on the https://bootstrap-table.com/docs/vuejs/webpack/ page.
• Imported jquery on main.js and directly on the component

The only issue I have found is that for BT, jquery is undefined, which I do not fully understand, as I load jquery before BT.

Has anyone come across the same issue before?

Thanks in advance

[daviidchann]

I'm trying to use Bootstrap Table but I'm getting this error;

Uncaught TypeError: Cannot read property 'methods' of undefined at eval (bootstrap-table-vue.esm.js?95f0:2126) at Module.eval (bootstrap-table-vue.esm.js?95f0:2145) at eval (bootstrap-table-vue.esm.js:2288) at Module../node_modules/bootstrap-table/dist/bootstrap-table-vue.esm.js (app.js:1309) at webpack_require__ (app.js:833) at fn (app.js:130) at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/profile/InvoiceList.vue?vue&type=script&lang=js&:6) at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/profile/InvoiceList.vue?vue&type=script&lang=js& (app.js:1576) at webpack_require__ (app.js:833) at fn (app.js:130)

I follow the doc https://bootstrap-table.com/docs/vuejs/webpack/

[lijie-cn]

I'm trying to use Bootstrap Table but I'm getting this error;

Uncaught TypeError: Cannot read property 'methods' of undefined at eval (bootstrap-table-vue.esm.js?95f0:2126) at Module.eval (bootstrap-table-vue.esm.js?95f0:2145) at eval (bootstrap-table-vue.esm.js:2288) at Module../node_modules/bootstrap-table/dist/bootstrap-table-vue.esm.js (app.js:1309) at webpack_require (app.js:833) at fn (app.js:130) at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/profile/InvoiceList.vue?vue&type=script&lang=js&:6) at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/profile/InvoiceList.vue?vue&type=script&lang=js& (app.js:1576) at webpack_require (app.js:833) at fn (app.js:130)

I follow the doc https://bootstrap-table.com/docs/vuejs/webpack/

I came across this issue too, any solution?

[dockrize]

I came across this issue too, any solution?

I don't think there is a solution at the moment. Had the same issue some days ago :(

[WpSlt]

I would also like compatibility with Vue Js v3

[waleev]

For me, now it's working fine with Vue 3. But it doesn't work with Vue 2, because openBlock and createBlock methods not found in vue. Strange things happening...

[ChrisRAra]

@waleev - How did you solve it?

[waleev]

@ChrisRAra Actually I've started a new project on Vue 3 instead of 2. That's it.

[ChrisRAra]

I keep getting Cannot read property 'methods' of undefined no matter what I do, Do you mind sharing how you are importing everything?

[waleev]

No problem. main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import BootstrapTable from '@/plugins/table'

const app = createApp(App)

app.component('BootstrapTable', BootstrapTable)

app.use(store).use(router).mount('#app')

I have included some extensions in plugins/table.js file:

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap-table/dist/bootstrap-table.min.css'

import './jquery'
import 'bootstrap'
import 'bootstrap-table/dist/bootstrap-table.js'
import 'bootstrap-table/dist/locale/bootstrap-table-ru-RU.js'
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'

import 'dragtable/dragtable.css'
import 'dragtable/jquery.dragtable.js'
import 'bootstrap-table/dist/extensions/reorder-columns/bootstrap-table-reorder-columns.js'

import 'jquery-resizable-columns'
import 'jquery-resizable-columns/dist/jquery.resizableColumns.css'
import 'bootstrap-table/dist/extensions/resizable/bootstrap-table-resizable.js'

import 'bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.css'
import 'bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.js'

import 'bootstrap-table/dist/extensions/cookie/bootstrap-table-cookie.js'

export default BootstrapTable

And plugins/jquery.js looks like this:

import jQuery from 'jquery'

import 'jquery-ui/themes/base/core.css'
import 'jquery-ui/themes/base/theme.css'
import 'jquery-ui/themes/base/sortable.css'
import 'jquery-ui/themes/base/resizable.css'

import 'jquery-ui/ui/core'
import 'jquery-ui/ui/widgets/sortable'
import 'jquery-ui/ui/widgets/resizable'

window.$ = jQuery
window.jQuery = jQuery

Finally, use component where you need:

<BootstrapTable ref="table"
  :columns="columns" :data="data" :options="options"
/>

Hope this can help you.

[Zakirp4]

@waleev . Thanks a lot. it's working now