vue 插件: vue-runkit

vue-runkit 是一個 vue component，是 runkit 的 wrapper

GitHub: https://github.com/maple3142/vue-runkit

安裝

安裝: npm install vue-runkit
cdn: https://unpkg.com/vue-runkit

程式碼

<!--建議手動引用"https://embed.runkit.com"，不過就算沒有的話vue-runkit也會自動加入-->
<script src="https://embed.runkit.com"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-runkit/dist/vue-runkit.min.js"></script>
<div id="runkit">
  <!--加button是為了只在需要時才載入embed-->
  <button v-if="!show" @click="show=!show">show embed</button>
  <runkit v-else :source="code" :env="env" node-version="8"/>
</div>

Vue.component('runkit', vuerunkit) //註冊 component
new Vue({
  el: '#runkit',
  data: {
    show: false,
    code: 'console.log(process.env.msg)', //code
    env: ['msg="Hello World"'] //環境變數
  }
})