Vuestrap Base Components
Vuestrap Base Components extend Bootstrap 4. Built with vuestrap, plain Vue.js and Webpack.
DEMO
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