Реализовать пользовательский компонент пакета npm VueJS - PullRequest
Новая
       32

Реализовать пользовательский компонент пакета npm VueJS

0 голосов
/ 26 июня 2019

Я пытаюсь использовать следующий npm-пакет для обхода опций X-frame:

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

Что требует добавления следующего тега в ваш HTML: 

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

Когда я устанавливаю пакет и добавляю следующие строки в мой 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/>'
})

Консоль выдает следующую ошибку: 

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

Итак, я вошел в компонент Vue, в котором я использую iframe, и добавил это к компонентам: 

import xframe from 'x-frame-bypass'

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

Но тогда консоль говорит следующее: 

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

Как правильно сделать это возможным? или это невозможно сделать?

1 Ответ

0 голосов
/ 26 июня 2019

Похоже, вы делаете небольшую ошибку в синтаксисе.

почему вы делаете import {xframe} from 'x-frame-bypass' в своем корне и import xframe from 'x-frame-bypass' в своем компоненте

, дайте нам знать, если это поможет

...