vue-runkit

vue wrapper of runkit embed

use in browser

<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({
  //.....
})

example

with webpack

npm install --save-dev vue-runkit or yarn add -D vue-runkit

import runkit from 'vue-runkit'
export default {
  components: { runkit }
  //else...
}

props

Options in Runkit Embed docs

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"/>

events

onLoad and onEvaluate

<runkit @load="onLoad" @evaluate="onEvaluate"/>

new Vue({
  //skip...
  methods: {
    onLoad(notebook){
      //doSomething...
    },
    onEvaluate(notebook){
      //doSomething...
    }
  }
})

notebook object

Runkit Embed API docs

1. can be access with ref

<runkit ref="runkit"/>

new Vue({
  //skip....
  mounted(){
    let notebook=this.$refs.runkit.notebook
    //doSomething...
  }
})

2. access from events

see here