What about Mixins and methods

[victorantos]

getProps and exctractProps is in place to be used with Mixins,

shouldn't we have something similar for component methods ? https://github.com/karol-f/vue-custom-element/blob/ed702bcd6daee65078b81f0b3055d0f4b151bf3d/src/utils/props.js#L54

[karol-f]

This linked code is for checking if mixin has some props and we need to expose them in vue-custom-element.

Can You please write more how it's connected to methods and what You want to achieve?

If just accessing methods from underlying Vue component, You have getVueInstance() e.g.

document.querySelector('widget-vue').getVueInstance()

Regards.

[victorantos]

I need to check if mixin has some methods and I need to expose them in.

My use case is to add a mixin method that getsDataFromServer() and this is exposed to any component for my custom element. Basically I want to share a method with all my components and Mixin should do that. But it does not work with vue-custom-element, throws some error on the getProps line

[karol-f]

Ok, so using getVueInstance() will expose whole Vue instance and You have there methods from mixins.

[victorantos]

export const myDataMixin = {
    props: {
        title: String,
        default: "empty"
    },
    methods: {
        getData: function ()
        {         
         }
    }
}

getData() method is not working when I apply this mixin

[karol-f]

Is it working when applied to Vue component and accesed e.g. as this.getData()?

If so getVueInstance() will get You root Vue instance of Your custom element.

[victorantos]

ok thank you.

I think this is working for me, I can call getData from App component

`Vue.mixin(
  {
    props: {
      title: String,
      default: "empty"
    },
    methods: {
      getData: function () {
        console.log('Done');
      }
    }
  });

Vue.customElement('my-widget', App);`

[victorantos]

So my solution was to make it a Global Mixin instead of Local Mixin.

This will not work with vue custom element

<script> import clickMixin from '../Mixins/clickMixin' export default { name: 'Test', mixins: [clickMixin] } </script>

[karol-f]

Maybe register mixing before creating custom element and it should be available in it