> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/vue/vue-directive.md).

# 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.

```javascript
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](https://www.wirebootstrap.com/products/bs-table.html) using the `table1` HTML element.

```html
<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.

```jsx
<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](https://docs.wirebootstrap.com/components/bootstrap/table) for details.

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

## v-wire-config

The `v-wire-config` attribute references the [custom Vue.js directive](https://vuejs.org/guide/reusability/custom-directives.html#introduction) registered above.  This attribute should be set to the name of the `data()` object property containing the WireBootstrap component's [configuration object](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration) in the `<scripts>` section of the [.vue file](https://vuejs.org/guide/scaling-up/sfc.html) for the parent component.

```html
<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](/vue/sample-project.md).