bootstrap-table/site/docs/vuejs/webpack.md

---

layout: docs title: Webpack description: Learn how to use Bootstrap Table Vue Component in your project using webpack. group: vuejs

toc: true

Importing JavaScript

Import Bootstrap Table’s JavaScript by adding this line to your app’s entry point (usually index.js or app.js):

{% highlight js %} import 'bootstrap-table' {% endhighlight %}

Of course, you can also import themes, locales or extensions you need:

{% highlight js %} // import theme import 'bootstrap-table/dist/themes/materialize/bootstrap-table-materialize.min.js'

// import locale import 'bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js'

// import extension and dependencies import 'tableexport.jquery.plugin' import 'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js' {% endhighlight %}

By default, Bootstrap Table is dependent on jQuery, Bootstrap and Popper, these are defined as peerDependencies, this means that you will have to make sure to add both of them to your package.json using npm install --save jquery bootstrap popper.js.

Importing CSS

Import Bootstrap Table’s CSS by adding this line to your app’s entry point:

{% highlight js %} import 'bootstrap-table/dist/bootstrap-table.min.css' {% endhighlight %}

Of course, you can also import themes or extensions you need:

{% highlight js %} // import theme import 'bootstrap-table/dist/themes/materialize/bootstrap-table-materialize.min.css'

// import extension import 'bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css' {% endhighlight %}

Usage

{% highlight vue %} <BootstrapTable

:columns="columns"
:data="data"
:options="options"

/>

{% endhighlight %}

Starter template

There is an vue-starter example in bootstrap-table-example project.

plugins/jquery.js

{% highlight js %} import jQuery from 'jquery' window.jQuery = jQuery {% endhighlight %}

plugins/table.js

{% highlight js %} import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap-table/dist/bootstrap-table.min.css'

import './jquery.js' import Vue from 'vue' import 'bootstrap' import 'bootstrap-table/dist/bootstrap-table.js' import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'

Vue.component('BootstrapTable', BootstrapTable) {% endhighlight %}

main.js

{% highlight js %} import './plugins/table.js' {% endhighlight %}

View.vue

{% highlight vue %}

{% endhighlight %}