JSFiddle - React, Tailwind, and code Playground

by Pooya Parsa

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id='app'>
  <!-- Modal Component -->
  <b-modal id="modal1" title="Test Modal" v-model="visible">
    Hello world ({{visible}})
  </b-modal>



<b-btn v-b-modal.modal1>Show (Directive)</b-btn>
<b-btn @click="visible=true">Show (Model)</b-btn>

<br>
Visible: {{visible}}

</div>

JavaScript

window.onload = function() {new Vue({el:'#app',
data: {
    visible: true
},
methods: {
    clicked() {
        this.progress = Math.round(Math.random()*10000)/100;
        console.log("Change progress to " + this.progress);
    }
}})}