JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
<my-component :my-prop="this.stringOrBool"></my-component>
</div>
CSS
.child {
padding: 20px;
border: 1px solid #cacaca;
}
Babel + JSX
var MyComponent = {
props: {
myProp: [String, Boolean]
},
template: '<div class="child">Type: {{ typeof myProp }}, value: {{ myProp }}</div>'
};
new Vue({
el: '#app',
data: {
stringOrBool: false
},
components: {
myComponent: MyComponent
}
});