vue wrapper of runkit embed
<script src="https://unpkg.com/vue-runkit/dist/vue-runkit.min.js"></script>Vue.component('runkit',window.vuerunkit) //then create you vue app... var app=new Vue({ //..... })npm install --save-dev vue-runkit or yarn add -D vue-runkit
import runkit from 'vue-runkit' export default { components: { runkit } //else... }props: { source: { type: String }, readOnly: { type: Boolean }, mode: { type: String }, nodeVersion: { type: String }, env: { type: Array }, title: { type: String }, minHeight: { type: String }, packageTimestamp: { type: Number }, preamble: { type: String } }due to html attributes limit, camelCase prop should be convert to kebab-case
example: readOnly => read-only
<runkit source="process.env.testvar" :env="['testvar=123']" :node-version="8.3.0"/>onLoad and onEvaluate
<runkit @load="onLoad" @evaluate="onEvaluate"/>new Vue({ //skip... methods: { onLoad(notebook){ //doSomething... }, onEvaluate(notebook){ //doSomething... } } })- can be access with
ref
<runkit ref="runkit"/>new Vue({ //skip.... mounted(){ let notebook=this.$refs.runkit.notebook //doSomething... } })- access from events