vue.dister Web 컴포넌트 등록

vue.dister Web 컴포넌트 등록

vue.js를 사용하고 있으며 stencil.js로 웹 컴포넌트를 만들었습니다.웹 컴포넌트를 npm에 공개하고 싶지 않기 때문에 vue 프로젝트의 src/assets 디렉토리에 포함시킬 뿐입니다.

하지만 오류가 발생합니다.

[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
    found in ---> 
        <App> at src/app.vue
            <Root>

자산 디렉토리에 이미 있는 다른 컴포넌트에서는 문제없이 동작합니다.

또, 사용법에도 도움이 되지 않습니다.

Vue.config.ignoredElements = ['my-component'];

로컬로 실행해도 컴포넌트가 비어 있기 때문입니다.

도와주셔서 감사합니다!

웹 컴포넌트를 로컬로 포함하는 경우 @vue/web-component-wrapper를 사용할 수 있습니다.

import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'

const Component = {
  // any component options
}

const CustomElement = wrap(Vue, Component)

window.customElements.define('my-element', CustomElement)

언급URL : https://stackoverflow.com/questions/57388767/vue-js-register-webcomponent