Vue: Is element.__vue__ save to use?

[jantimon]

Is there a clean way to get the current vue instance from a given DOM node or is it even future save to access element.__vue__?

The use case is the integration with a large famous enterprise content management system where we would like to build up all content elements out of vue components.
Unfortunately the CMS ships with javascript code which can't be changed without too high efforts.
These third party scripts allow authors of the cms to use drag'n'drop to place new content element (e.g. a carousel or a teaser) to the page.
After the drag'n'drop happened an event is fired which we would like to bind on and reinitialize all new placed inline template elements.

We managed to come up with a hack but maybe there is a better solution for this use case:
https://jsfiddle.net/5vxwr34o/

/**
 * Content change handler
 */
function handleContentChange() {
  const inlineTemplates = document.querySelector('[inline-template]');
  for (var inlineTemplate of inlineTemplates) {
    processNewElement(inlineTemplate);
  }
}

/**
 * Tell vue to initialize a new element
 */
function processNewElement(element) {
  const vue = getClosestVueInstance(element);
  new Vue({
    el: element,
    data: vue.$data
  });
}

/**
 * Returns the __vue__ instance of the next element up the dom tree
 */
function getClosestVueInstance(element) {
  if (element) {
    return element.__vue__ || getClosestVueInstance(element.parentElement);
  }
}

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue - thank you!

[yyx990803]

To some extent yes - the official devtool relies on it too, so it's unlikely to change or break.

[jantimon]

Thanks @yyx990803 - you see any reason not to follow this approach?

[yyx990803]

@jantimon can't really say much because this is such a niche case, but I'd suggest tearing down existing Vue instances that are no longer needed.

[Regaddi]

@yyx990803 I'm not sure if this is really a niche case. This pretty much affects every WYSIWYGish UI representation for editors of any content management system with such a feature.
From the point on you need or rely on some client-side rendering technique in a content component this case becomes present.
That are just my cents for this discussion 😃

[matthiasg]

we have had some issues were an outer component just delegates to another component using <component :is="..."> in those cases the outer component and the inner component both linked to the same $el and the __vue__ property was sometimes linked to the outer component and sometimes to the inner component. So we don't rely on __vue__ to find the correct component all the time.

[rustyx]

Nitpick: save is a verb, safe is an adjective. These are different words.

[nfplee]

What's the equivalent in Vue 3? I see there's __vueParentComponent but I have to now say __vueParentComponent.props.x instead of __vue__.x. Also I can't see how I can access my custom variables (against the component instance) created in the beforeCreate method.