> 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/sample-project/wire-components.md).

# Wire Components

The examples in the sample project illustrate a few ways in which the WireBootstrap Vue Directive can be used to render WireBootstrap components in a Vue.js application.

The first example in the sample project uses an HTML `table` element to render a [Bootstrap Table](https://www-test.wirebootstrap.com/products/bs-table.html) using the WireBootstrap Vue Directive.

```html
 <div class="col-md-6">
    <div class="card border-secondary mb-3">
        <div class="card-header">Bootstrap Table</div>
        <div class="card-body text-secondary">
        
            <!-- Bootstrap table bound to an HTML table via the WireBootstrap Vue Directive  -->
            <table wire-component="wire.bsTable" v-wire-config="configTable" 
                class="table table-hover table-striped"></table>            
                
         </div>
    </div>
</div>
```