Simplest checkbox in Vue.JS

Every time I need to use a checkbox element with custom styles in a VueJS project, I type “custom checkbox” in the search bar and land on this w3schools tutorial. Then just copy, paste, tinker with the styles and voilà!

Well that takes time every time, so here goes my simplest and cleanest adaptation of a fully customisable and reusable Vue.JS checkbox component.

Let’s call it Checkbox.vue:

Then simply import Checkbox.vue in your parent component and bind it’s value using the v-model directive:

Any improvements are more than welcome here!

Hope this helps someone. Cheers!

PS: If you need a React example, you can find it here.