Components

The second example in the sample project is a new Vue.js Component called MyTable. The component renders a Bootstrap Table using the WireBootstrap Vue Directive. This component can then be used throughout an application to simplify rendering a Bootstrap Table.

MyTable

The example below shows the code for the MyTable component function. The component renders a Bootstrap Table in its template. It sets the v-wire-config attribute of the WireBootstrap Vue Directive to the config property passed in by the parent component.

<script setup>
defineProps({
  config: {
    type: Object
  }
})
</script>

<template>
    <table wire-component="wire.bsTable" v-wire-config="config" class="table table-hover table-striped"></table>
</template>

The MyTable component is then imported in the App.vue component in order to render the Bootstrap table. The binding passes in the configuration object using the config property defined above.

<script>
    import MyTable from './MyTable.vue';  
</script>

<MyTable :config="..." />