RaphaHsu / vuestrap-base-components

Web components that extend Bootstrap 4 - http://kzima.github.io/vuestrap-base-components/#/accordion

Vuestrap Base Components

Vuestrap Base Components extend Bootstrap 4. Built with vuestrap, plain Vue.js and Webpack.

DEMO

Documentation

QUICK USE

For compiled components, use it like this:

Bower

bower install vuestrap-base --save-dev

<link href="bower_components/vuestrap-base/dist/vuestrapBase.min.css" rel='stylesheet' type='text/css'>
<script src="bower_components/vuestrap-base/dist/vuestrapBase.min.js"></script>

NPM

npm install vuestrap-base-components --save-dev

import vuestrapBase from vuestrap-base-components

And then in your Vue instance:

new Vue({
	el: '#app',
	components: { 'vs-alert': vuestrapBase.alert }
})

-- OR --

If you chosen to work with source components, just import* desired components like so:

import { vsAlert, vsButton } from 'vuestrap-alert/src/components'

and then load it in your Vue instance:

new Vue({
	el: '#app',
	components: { vsAlert, vsButton }
})

*Note: You will need Babel Loader in your Webpack config file to support ES6 syntax.

You can then use icon component in your html, like so:

<vs-alert>Hello</vs-alert>

THEMING

To be able to use your app theme with component's scss variables, you will need to use vuestrap-theme-loader in your webpack config file.

npm install vuestrap-theme-loader --save-dev

See vuestrap-starter for a webpack config example with theme loader.

TODO

• document events
• testing