Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js

Demo and documentation
https://hamed-ehtesham.github.io/pretty-checkbox-vue/

Installation

npm i --save-dev pretty-checkbox-vue

Browser

Include the script file, then install the component with Vue.use(PrettyCheckbox); e.g.:

<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.js"></script>
<script type="text/javascript">
  Vue.use(PrettyCheckbox);
</script>

Module

import PrettyCheckbox from 'pretty-checkbox-vue';

Vue.use(PrettyCheckbox);

Or

import PrettyInput from 'pretty-checkbox-vue/input';
import PrettyCheck from 'pretty-checkbox-vue/check';
import PrettyRadio from 'pretty-checkbox-vue/radio';

Vue.component('p-input', PrettyInput);
Vue.component('p-check', PrettyCheck);
Vue.component('p-radio', PrettyRadio);

Usage

Once installed, it can be used in a template as simply as:

<p-check name="check" color="success" v-model="check">check</p-check>
<p-radio name="radio" color="info" v-model="radio">radio</p-radio>

<!-- Or it can be used just like input -->

<p-input type="checkbox" name="check" color="success" v-model="check">check</p-input>
<p-input type="radio" name="radio" color="info" v-model="radio">radio</p-input>

Properties

Slots

If you have discovered a 🐜 or have a feature suggestion, feel free to create an issue on Github.

License

Released under The MIT License. Copyright (c) hamed-ehtesham.