Installation

WireBootstrap for Web Components and it's source are available in GitHub at https://github.com/WireBootstrap/webcomponents.

git clone https://github.com/WireBootstrap/webcomponents

The source code includes a sample project that demonstrates how to use WireBootstrap with Web Components to build applications.

All source is compiled into a single file wire-webcomponents.js which can be installed directly by itself from an NPM package.

npm install @wirebootstrap/wire-webcomponents

Sample

There is a sample application in the GitHub project located at \sample.

To run the sample, first install the dependent npm packages using npm initfrom a command console.

npm init

Next, open the first page of the application using npm run start.

npm run start

Tinybind

The WireBootstrap for Web Components solution has a dependency on Tinybind. Tinybind is used for two-way attribute data binding for the objects managed by WireBootstrap in web components.

Note, WireBootstrap for Web Components changes the default rv-* prefix to wr-* for use in WireBootstrap applications.

Tinybind is automatically installed with WireBootstrap for Web Components when using the npm package.

Libraries

Reference the libraries for the solution on pages or in build configurations in dependency order.

Reference the Tinybind library before the core WireBootstrap library. Similarly, reference the WireBootstrap for Web Components library after the core WireBootstrap library.

<script src="../node_modules/tinybind/dist/tinybind.min.js"></script>
<script src="../node_modules/@wirebootstrap/wire/wire.js"></script>
<script src="../node_modules/@wirebootstrap/wire-webcomponents/wire-webcomponetns.js"></script>