Lifecycle events are emitted twice

[msassa]

Hello. When I place a custom element made with Vue on a site that is already using vue, lifecycle events are fired twice, like you can check here.

https://codesandbox.io/s/vue-template-njnwu?fontsize=14

How can i fix this? I made a custom element in vue for distribution (in a backend site), but also need to use that element inside my web (frontend), that is already using vue. Thanks

[karol-f]

Hi, the problem is that custom elements are run so fast that it run before Vue app.

When Vue app starts it grab html and add it as template, creating custom elements for the second time.

Solution:

• delay definition of custom elements untill app start
• or don't put custom elements into html as it's rendered by browser immediately (and browser will create defined custom elements)

For the second advice just use different template definition - Strings or X-Templates described here https://medium.com/js-dojo/7-ways-to-define-a-component-template-in-vuejs-c04e0c72900d

[msassa]

Hello, thanks for the response. I can't figure out how to implement any of that solutions.

Let me explain how I made this custom element.

In to the backend, I made this custom element (is a slider of cars) and I'm compiling it in a single js file, in order to distribute to clients. So, I deliver a single js file and the custom element.

For example: <script src="https://backend.net/js/webcomponents/sliders.js"></script> and the custom element: <custom-slider slider-id="4" template-id="3" ></custom-slider>

So, how can apply any of the solutions, if you can help me with this, please.

Thanks

[karol-f]

E.g. like this - https://codesandbox.io/s/vue-template-kc6j0

Regards.

[msassa]

Thank you so much !!!