I'm trying to implement Bootstrap-Table (https://github.com/wenzhixin/bootstrap-table) inside my Laravel and Vue.js project, but something is wrong.
I tried all ways of importing I could think of (inside app.js, app.blade, bootstrap.js, even vite.config.js) and all of them failed.
What I've Tried:
Inside app.js
import 'bootstrap-table/dist/bootstrap-table.js'
import bootstrapTable from 'bootstrap-table/dist/bootstrap-table.js';
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'
app.component('BootstrapTable', BootstrapTable);
These normally lead to
Could not find a declaration file for module 'bootstrap-table/dist/bootstrap-table.js'.
The errors I'm getting are:
Uncaught TypeError: Cannot set properties of undefined (setting 'BootstrapTable')
at bootstrap-table.min.js:10:132646
at bootstrap-table.min.js:10:233
at bootstrap-table.min.js:10:245
bootstrap-table-vue.min.js:10 Uncaught TypeError: Cannot read properties of undefined (reading 'fn')
at bootstrap-table-vue.min.js:10:1806
at bootstrap-table-vue.min.js:10:1905
at bootstrap-table-vue.min.js:10:205
at bootstrap-table-vue.min.js:10:209
There are some scripts/links necessary to run, and I think I'm also confused about this and where it should go.
For example:
<script src="https://unpkg.com/bootstrap-table@1.21.0/dist/bootstrap-table.min.js"></script>
My objective:
I want to render the table inside a Vue.component, with some data I get from axios. So I figured I couldn't put the scripts inside the component itself. I need to make the table component (or a way to render it) global.
Please help me get this right