Implement npm package custom component VueJS

Question

I'm trying to use the following npm-package to bypass X-frame options:

https://www.npmjs.com/package/x-frame-bypass

Which requires the following tag to be inserted inside your HTML:

 <iframe is="x-frame-bypass" src="https://example.org/"></iframe>

When I install the package, and add the following lines to my App.js

import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {xframe} from 'x-frame-bypass' <-- importing the npm package

library.add(faCoffee, faLink, faUser, faSync, faArrowLeft, faPlay, faCheck, faTimes, faEdit, faPause, faStepForward, faCog, faUserCircle, faInfoCircle, faSignOutAlt, faImages)

Vue.use(spatial)
Vue.use(progress)

Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('x-frame-bypass', xframe) <-- adding the xframe component

Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App/>'
})

The console throws the following error:

Vue warn: Unknown custom element: <x-frame-bypass> - did you register the component correctly?

So I went into the Vue component in which I use the iframe, and add this to the components:

import xframe from 'x-frame-bypass'

  export default {
    name: 'Component',
    components: {
      Button,
      'x-frame-bypass': xframe
    },

But then the console says the following:

Failed to mount component: template or render function not defined.

What is the right way to make this possible? or is it not possible to make this work?

Answer 1

Seems like you are making a small mistake in syntax.

why are you doing import {xframe} from 'x-frame-bypass' in your root and import xframe from 'x-frame-bypass' in your component

let us know if that helps