廢文集中區

Vue Plugin: vue-runkit

發表於
分類於 專案
中文版
This article is LLM-translated by GPT-4o, so the translation may be inaccurate or complete. If you find any mistake, please let me know.

vue-runkit is a Vue component, a wrapper for runkit

Runkit is a website that allows you to run some Node.js programs in the browser

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

Installation

Install: npm install vue-runkit CDN: https://unpkg.com/vue-runkit

Code

<!--建議手動引用"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"'] //環境變數
	}
})