Vue JSFiddle
HTML
<div id="app">
<div>
<v-jsfiddle src="http://jsfiddle.net/changjoo_park/ekd60p4g/embedded/" :js=false :css=false :html=false :result=true @loaded="onFiddleLoad"></v-jsfiddle>
</div>
</div>
<template id="v-jsfiddle">
<div class="vue-fiddle">
<iframe :width="width" :height="height" :src="parsedURL" allowfullscreen="allowfullscreen" frameborder="0" @load="onLoad" v-show="isLoaded" v-if="isLoaded"></iframe>
<div v-else>
<slot name="loader">
Loading...
</slot>
</div>
</div>
</template>
JavaScript
Vue.component('v-jsfiddle', {
template: '#v-jsfiddle',
props: {
width: {
type: String,
default: '100%',
required: false
},
height: {
type: String,
default: '300',
required: false
},
src: {
type: String,
required: true
},
js: {
type: Boolean,
required: false,
default: true
},
css: {
type: Boolean,
required: false,
default: true
},
html: {
type: Boolean,
required: false,
default: true
},
result: {
type: Boolean,
required: false,
default: true
}
},
data: function () {
return {
isLoaded: false
}
},
computed: {
parsedURL () {
let url = this.src.replace('https:', '').replace('http:', '')
console.log('first url : ', url.trim())
let tabOptions = []
if (this.js) {
tabOptions.push('js')
}
if (this.css) {
tabOptions.push('css')
}
if (this.html) {
tabOptions.push('html')
}
if (this.result) {
tabOptions.push('result')
}
url += tabOptions.join(',')
console.log('second : ', url)
return url
}
},
methods: {
onLoad: function () {
this.isLoaded = true
this.$emit('loaded')
}
}
})
new Vue({
el: '#app',
methods: {
onFiddleLoad: function () {
window.alert('loaded')
}
}
})