Is it possible to not expose methods via getVueInstance().

[toams69]

I don't think the user of the webcomponent need to know that the component has vue embeded. This is a good thing to have but I would prefer to have directly access to the method. Is it possible to have access directly to method via the element ?

[oskarrough]

I also wanted this for a component. Here's one approach you can try:

Vue.customElement('my-element', VueComponent, {
    connectedCallback() {
        const setPublicMethods = (event) => {
            const instance = this.getVueInstance()
            this.myMethod = instance.myMethod
        }

        this.addEventListener('vce-ready', setPublicMethods)
    },

    disconnectedCallback() {
        this.removeEventListener('vce-ready', setPublicMethods)
    }
})

// document.querySelector('my-element').myMethod()

[karol-f]

Hi, getVueInstance() method is indeed accessible to users. You can use, a little bit changed, above code to remove getVueInstance():

const removeVueInstanceGetter = (event) => {
    this.getVueInstance = () => {};
}

Vue.customElement('my-element', VueComponent, {
    connectedCallback() {
        this.addEventListener('vce-ready', removeVueInstanceGetter)
    },

    disconnectedCallback() {
        this.removeEventListener('vce-ready', removeVueInstanceGetter)
    }
})

I don't think that adding another option just to remove it is necessary. What do you think?