Not working with Vue component

[ultrageek]

Apologies if this is not a bug:

The code works fine in Chrome for me, on a localhost server, unless I try to integrate it into a Vue application. I use Vue with a CDN, with HTML and JS separated. I get "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."

I tried adding 'x-frame-bypass' : xframe to my Vue's components list, which throws an error about "xframe'. I then replaced xframe with iframe, but the same type of error shows up. I also embedded x-frame-bypass.js into my own Vue app's JS file, etc. But either my Vue code works and X-Frame-Bypass doesn't, or vice versa.

Now here's the weird thing. At the moment, I have the following situation:

1. Chrome browser (fairly recent): Vue code works, xframe works but won't display due to the aforementioned complaint.
2. Firefox browser: Vue code doesn't work, xframe displays fine
3. Stack (Chromium) browser: same as with Firefox

Unfortunately, I don't know enough about extending elements to know if this is actually a bug or just appears to be. So apologies in advance

[realrecordzLab]

Same problem in my vue app. I've installed the library using vue ui and imported it in my vue app main.js entry point but with no success

[realrecordzLab]

@ultrageek try this vue directive I've made to make the library work in vue.

[ultrageek]

Nice, thanks! I ended up tossing xframebypass and used Vue's @click on text to load my iframe with the necessary URL. This is only a hack, but the URLs I need don't seem to have a cross-domain issue.

[realrecordzLab]

Nice, thanks! I ended up tossing xframebypass and used Vue's @click on text to load my iframe with the necessary URL. This is only a hack, but the URLs I need don't seem to have a cross-domain issue.

You are welcome! Feel free to download and use it in your projects

[bigWillow]

<template> <div v-html="iframeHtml" :class="[ iframeBoxClass]"> </div> </template>

`<script>
import './custom-elements-builtin@0.6.5.js'
import './x-frame-bypass.js'

export default {
data() {
return {
iframeHtml: '',
src: '', //iframe src
iframeClass: '', //ifame css
iframeBoxClass: '' //iframe box css
}
},
mounted(){
this.initBypass()
},
methods: {
// 初始化Bypass
initBypass() {
const {src, iframeClass} = this
this.iframeHtml = <iframe frameborder="0" src="${src}" class="${iframeClass || ''}" is="x-frame-bypass"> </iframe>

	}
}

}
</script>`