Skip to content
vue wrapper of runkit embed
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.babelrc
.gitignore
LICENSE
README.md
example.html
package.json
webpack.config.js
yarn.lock

README.md

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...
  }
})
  1. access from events

see here

You can’t perform that action at this time.