Using application context in detached component?

[rockisch]

Hi! I'm trying to build a modal 'detached component', but I'm having a hard time ensuring it 'inherits' the app context from the called component. With 'app context' I mean directives/provides/plugins.

Here's an example:

// index.js
const app = createApp(App);
app.use(SomePlugin);
app.provide("foo", "bar");


// modal.js
export function showModal(component) {
  const vNode = h(component);
  const div = document.createElement("div");
  render(vNode, div);
  document.body.appendChild(div.firstElementChild);
  // ...extra code to destroy the modal on close
}

// App.vue
<script setup>
showModal(AnotherComponent);
</script>


// AnotherComponent.vue
<script setup>
const foo = inject("foo");
</script>

<template>
  {{ foo }}
</template>

This obviously doesn't work because the vnode created inside showModal does not have the app context needed to access foo. Is there a easy way to do this without creating 'a separate app' with createApp and re-configuring all directives/provides/plugins?

[LinusBorg]

1. I would not call this a functional component as that refers to a different concept in Vue
2. What you are havinbg here is merely a normal function that mounts a separate app - calling that function in the template doesn't really make it a "component" in any significant way. You should not do this as it will re-mount that separate app over and over on each re-render, could lead to subtle bugs you don't want. call the function in onMounted() or an event handler or whatever.
3. There currently is no built-In way to mount a separate app that inherits all the global components, context etc.

So the best you can do is to encapsulate all of that app setup code in a function so that you can use it here as well:

// myApp.js
import { createApp } from 'vue'
export function createMyApp(AppComponent) {
  const app = createApp(AppComponent)

  app.use(...) // add plugins, global components etc here

  return app
}

Then use that function to mount your main app in you main.js file, and also use it to mount that small separate app in your showModal() function. Don't forget to unmount that app when the component you mounted it from is itself unmounted.

[rockisch]

Regarding 1, yeah I was def not referencing that concept, just called it that on a whim 😆

As for the rest, yes I'm aware the usage there would be bad and not really do what I want, I just tried reducing the problem as much as possible. And as I mentioned, I don't really want to build a 'separate app', I just want to somehow attach the 'detached component' (maybe that's a more appropriate name) to the same app context as the component that called it.

You can also think of it as dynamically injecting a <Teleport> into the called app without having to modify the template. That's more or less what I'm currently doing with my modals in my project btw, but I wanted to try an approach that does not require the caller component to modify it's template.

I think I might end up passing the current component instance to the function and either just dynamically appending a teleport to it, or fiddle with the properties (_app) to make sure the created component works as expected, but that sounds even more hackish, and I don't really need the Vue hierarchy, I really just interested in inheriting the app context.