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

then

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 @onLoad="onLoad" @onEvaluate="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