Vue Directive

The WireBootstrap Vue Directive allows any WireBootstrap component to be used inside the Vue.js framework.

Registering the Directive

To start using the directive, import WireConfigDirective from WireConfigDirective.js and register the directive with the Vue.js application.

import { createApp } from 'vue'
import App from './App.vue'
import WireConfigDirective from './WireConfigDirective.js';

const app = createApp(App);

app.directive('wire-config', WireConfigDirective);

app.mount('#app');

Using the Directive

Outside of the Vue.js framework, WireBootstrap components are bound to HTML elements using the render method on a new instance of the component class. The example below renders a Bootstrap Table component using the table1 HTML element.

<table id="table1" class="table table-hover table-striped"></table>
<script>
    const config = {};
    new wire.bsTable().render("#table1", config);
</script>

In Vue.js, the same component can be registered using the WireBootstrap Vue Directive.

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

The directive properties are detailed below.

wire-component

The wire-component HTML element attribute is used to tell the WireBootstrap Vue Directive which WireBootstrap component to render. Set this attribute to the fully qualified object name of the WireBootstrap component.

In the example below, the Bootstrap Table component is located off the global wire object in a class called bsTable. See the documentation for details.

<template>
    <table wire-component="wire.bsTable"></table>
</template>

v-wire-config

The v-wire-config attribute references the custom Vue.js directive registered above. This attribute should be set to the name of the data() object property containing the WireBootstrap component's configuration object in the <scripts> section of the .vue file for the parent component.

<script>    
    export default {
        data() {
            return {
                tableConfig: {
                    data: [ 
                        { fruit: "apples", sales: 150 },
                        { fruit: "oranges", sales: 200 },
                        { fruit: "bananas", sales: 100 },
                    ]
                }
            }
        }
    }
</script>

<template>
    <table wire-component="wire.bsTable" v-wire-config="tableConfig"></table>
</template>

For additional examples, visit the Sample Project.