Feature Request: Create app with same appContext? createChildApp #2097

07akioni · 2020-09-11T04:01:47Z

What problem does this feature solve?

Somethings I need to created detached components.

For example I may call this.$Message.info(content) in which content may be a render function and the component created will be mounted on document.body.

For example:
Before calling $Message.info

<body>
  <div id="app />
</body>

After calling $Message.info

<body>
  <div id="app">
  <div class="message" />
</body>

Calling createApp(MessageComponent).mount(document.body) inside $Message.info may render the component in body. However the render function will use the new appContext rather than the original appContext which has already been registered with custom components. For example:

this.$Message.info(() => h('component-registered-on-app', ...))

What does the proposed API look like?

const app = createApp(rootComponent)
app.mount(document.body)
const childApp = app.createChildApp(detachedComponentWhichNeedSameContext)
childApp.mount(document.body)

The text was updated successfully, but these errors were encountered:

lawvs · 2020-09-11T04:37:39Z

Maybe you should use resolveComponent ~~or Teleport~~?

import { resolveComponent } from 'vue'

this.$Message.info(() => h(resolveComponent('component-registered-on-app'), ...)) // Error ❌

// Edited
const messageContent = resolveComponent('component-registered-on-app')
this.$Message.info(() => h(messageContent, ...))

07akioni · 2020-09-11T04:53:59Z

Maybe you should use resolveComponent ~~or Teleport~~?

import { resolveComponent } from 'vue'

this.$Message.info(() => h(resolveComponent('component-registered-on-app'), ...))

resolveComponent works if it is available in the current application instance. However it's called in new app.

Teleport won't work. Message won't be rendered in the current component tree. What I called message is a toast in material design.

07akioni · 2020-09-11T05:15:36Z

Let me explain more percisely.

pseudo code in vue 2/3

index

Vue2
import otherComponents from 'ui'
import MessagePlugin from 'message'
import Vue from 'vue'

Vue.use(otherComponents)
Vue.use(MessagePlugin)

Vue3
import otherComponents from 'ui'
import MessagePlugin from 'message'
import { createApp } from 'vue'

const app = createApp(root)

app.use(otherComponents)
app.use(MessagePlugin)

MessagePlugin

Vue2
Vue.prototype.$Message = {
  info (content) {
    document.body.appendChild((new Vue(MessageComponent, {
      propsData: { content }
    })).$mount())
  }
}
Vue3
app.config.globalProperties.$Message = {
  info (content) {
    createApp(MessageComponent, {
      content
    }).mount(document.body)
  }
}

use it

...
Vue2
  this.$Message.info(h => h('other-component'))
Vue3
  this.$Message.info(() => h(???)) // 'other-component' won't be resolved since it's in another app
...

However in vue-next. (new Vue(root)).$mount() is replace by createApp(root).mount(). The original MessageComponent's content render function will resolve components from Vue so different root can share the same installed components. However the new Message component will resolve components from app which means the originally installed components won't be resolved in new Message component.

lawvs · 2020-09-11T05:52:56Z

This is one way to implement the same features in vue3. No need to use a new app.
~~Sorry for using jsx~~

// Message HOC
import { Teleport, defineComponent, provide, ref } from 'vue'

const Message = ({ open, text }) => (
  <Teleport to="body">{open && <div className="modal">{text}</div>}</Teleport>
)

// HOC
const withMessage = (Comp) =>
  defineComponent({
    setup() {
      const show = ref(false)
      const text = ref('Message')
      provide('message', (t) => {
        show.value = true
        text.value = t
      })

      return () => (
        <>
          <Comp></Comp>
          <Message open={show.value} text={text.value}></Message>
        </>
      )
    },
  })

use it

import { createApp, defineComponent, inject } from 'vue'

const App = defineComponent({
  setup() {
    // Use
    const useMessage = inject('message')
    const onClick = () => useMessage(<div>new message</div>)

    return () => <button onClick={onClick}>show message</button>
  },
})

createApp(withMessage(App)).mount('#app')

07akioni · 2020-09-11T06:04:51Z

This is one way to implement the same features in vue3. No need to use a new app.
~~Sorry for using jsx~~

// Message HOC
import { Teleport, defineComponent, provide, ref } from 'vue'

const Message = ({ open, text }) => (
  <Teleport to="body">{open && <div className="modal">{text}</div>}</Teleport>
)

// HOC
const withMessage = (Comp) =>
  defineComponent({
    setup() {
      const show = ref(false)
      const text = ref('Message')
      provide('message', (t) => {
        show.value = true
        text.value = t
      })

      return () => (
        <>
          <Comp></Comp>
          <Message open={show.value} text={text.value}></Message>
        </>
      )
    },
  })

use it

import { createApp, defineComponent, inject } from 'vue'

const App = defineComponent({
  setup() {
    // Use
    const useMessage = inject('message')
    const onClick = () => useMessage(<div>new message</div>)

    return () => <button onClick={onClick}>show message</button>
  },
})

createApp(withMessage(App)).mount('#app')

It's reasonable.

However it seems the API app.use(MessagePlugin) won't work in the case. Is there any possibility to keep the API?

createApp(withMessage(withNotification(withConfirm(app))) is an ugly api composition.

07akioni · 2020-09-11T07:48:05Z

This is one way to implement the same features in vue3. No need to use a new app.
~~Sorry for using jsx~~

use it

What's more, when using sfc the usage is too complicate for a component library user.
despite of message-privider, new usage

export default {
  setup () {
    return {
      message: inject('message')
    }
  },
  methods: {
    do () {
      this.message.info()
    }
  }
}

original

export default {
 methods: {
    do () {
      this.message.info()
    }
  }
}

posva · 2020-09-11T08:49:36Z

If you want your library to render elements, give the user a component to put in their app where you pass the messages. The solution with a hoc by @lawvs also works

Remember to use the forum or the Discord chat to ask questions!

skirtles-code · 2020-09-11T11:46:07Z

I think this deserves further consideration.

The suggestion in the documentation to 'create a factory function' to share application configuration is much less straightforward than it sounds.

I've seen people ask about this several times on the forum and Stack Overflow, so it seems to be a common problem, and so far I haven't seen a really compelling answer. Perhaps it's just a documentation problem but either way it is a problem that needs addressing properly.

hzyhbk · 2020-09-22T03:29:10Z

I've meet same issue here when I try to upgrade my vue plugin libriary to vue3. It seems like there is no better way except create a factory function or hoc, but the usage is too complicate for a component library user.

Hope the vue team can porvide some other ways to slove this problem.

jw-foss · 2020-09-30T06:40:56Z

If you want your library to render elements, give the user a component to put in their app where you pass the messages. The solution with a hoc by @lawvs also works

Remember to use the forum or the Discord chat to ask questions!

Indeed @lawvs's solution is a good solution, what about writing 3rd party library? When 3rd party library exports Message method for user to use, the user will have to do things like withMessage(app) in order to get the message component injected into the app.
I am working on a library ElementPlus, my implementation here works for now, but the component itself is sandboxed from the main app, which means it cannot fetch any global data from the app itself, this could potentially be a problem when user need to access global data like config.

yyx990803 · 2020-10-13T20:01:32Z

It's not documented but yes it's possible to render using existing app context:

import { h, render } from 'vue'

const childTree = h('div', 'some message')
treeToRender.appContext = app._context
render(childTree, document.getElementById('target'))

We can make this a method on the app instance:

app.render(h('div', 'some message'), document.getElementById('target'))

skirtles-code · 2020-10-16T06:58:19Z

I did some experimenting using the idea @yyx990803 suggested. Here is a crude demo:

https://jsfiddle.net/skirtle/94sfdLvm/

I changed the API slightly:

// To add
const vm = app.render(Component, props, el)

// To remove
app.unrender(vm)

The reasoning behind my changes was:

We need a way to remove the newly rendered content.
This API for render is more similar to createApp and mount, albeit combined into one (I've glossed over SSR but I don't see any reason that couldn't be supported).
This keeps explicit VNodes out of it.
It ensures that all VNodes and elements have an associated vm. I imagine this'll be easier for the Devtools to handle if nothing else.
The new vm is returned by render. It isn't clear how it would be available otherwise.

I ran into a problem trying to render multiple things to the same parent, which I think is important for the use cases here. In my demo I bodged around it by adding in an extra <div> for each item but that isn't ideal as it pollutes the DOM with extra junk.

mannymu · 2020-12-02T01:34:35Z

    import { createVNode ,render} from 'vue'
const body = document.body;
const root = document.createElement("div");
body.appendChild(root);
root.className = "custom-root";
export default {
    install(app){
        let div = document.createElement("div");
        root.appendChild(div);
        // youCom 为自己写的组件,  SoltChild 可以是自己的子组件 ，也可以不传
        let vm = createVNode(youCom,{},{
            // slots
            default:()=>createVNode(SoltChild)
        });
        vm.appContext = app._context; // 这句很关键，关联起了上下文
        render(vm,div);
         
    }
}

zouhangwithsweet · 2020-12-02T03:00:39Z

I developed a small tool that allows me to use functions to mount VueComponent.
🚴‍♂️ vue-create-component

WormGirl · 2022-07-05T02:56:57Z

It's not documented but yes it's possible to render using existing app context:
import { h, render } from 'vue'

const childTree = h('div', 'some message')
treeToRender.appContext = app._context
render(childTree, document.getElementById('target'))
We can make this a method on the app instance:
app.render(h('div', 'some message'), document.getElementById('target'))

Why childTree.component cannot get the methods at component, it is undefind.
I do something like this

import ShowErrorDialog from './src/errorDialog.ts';
import type { Plugin, App } from 'vue';

export type SFCWithInstall<T> = T & Plugin;

const _showErrorDialog = ShowErrorDialog as SFCWithInstall<
  typeof ShowErrorDialog
>;

_showErrorDialog.install = (app: App) => {
  _showErrorDialog._context = app._context;
  app.config.globalProperties.$systemError = _showErrorDialog;
};

export default _showErrorDialog;


// errorDialog.ts
import ErrorDialogConstruct from './index.vue';
import { isEmpty, isFunction } from 'lodash-es';
import { h, render } from 'vue';

interface Option {
  title: string;
}
let instance;
const stack: Option[] = [];

const genContainer = () => {
  return document.createElement('div');
};

const showErrorDialog = (opts, appContext) => {
  const { title, description, errorCode, traceCode } = opts;
  if (!instance) {
    const props = {};
    const vnode = h(ErrorDialogConstruct, props);
    const container = genContainer();

    vnode.appContext = appContext ?? showErrorDialog._context;
    render(vnode, container);
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    document.body.appendChild(container!);
    instance = vnode.component;
  }
  const options = {
  };
  stack.push(options);
  // $open is undefined, how to get the methods?
  instance.$open(stack);
 // this can work
 // instance.ctx.$open(stack);
  instance.onOk('ok', () => {
    if (isFunction(opts.onOk)) {
      opts.onOk(instance);
    }
    instance = null;
  });
};
showErrorDialog._context = null;
export default showErrorDialog;

// index.vue
<template>
  <a-modal v-model:visible="visible">demo</a-modal>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { message } from 'ant-design-vue';

export default defineComponent({
  name: 'ErrorDialog',
  emits: ['open', 'close', 'closed', 'opened'],
  data() {
    return {
      visible: false
    };
  },
  methods: {
    $open(stack) {
      // TODO
    }
  }
});
</script>

aabeborn · 2022-07-11T15:08:58Z

It's not documented but yes it's possible to render using existing app context:
import { h, render } from 'vue'

const childTree = h('div', 'some message')
treeToRender.appContext = app._context
render(childTree, document.getElementById('target'))
We can make this a method on the app instance:
app.render(h('div', 'some message'), document.getElementById('target'))

I tested this approach but using the render method I lose props' reactivity. Is that normal?

nikolas223 · 2022-10-04T22:48:12Z

It's not documented but yes it's possible to render using existing app context:
import { h, render } from 'vue'

const childTree = h('div', 'some message')
treeToRender.appContext = app._context
render(childTree, document.getElementById('target'))
We can make this a method on the app instance:
app.render(h('div', 'some message'), document.getElementById('target'))
I tested this approach but using the render method I lose props' reactivity. Is that normal?

Yes i tested this approach too and props are not reactive. The only way i found to make them reactive was

const treeToRender = createApp(() => h('div', { reactiveProp: true });
treeToRender._context = app._context;
treeToRender.mount('#target');

but i cannot bind the context that way, whereas with the first approach the context is bound successfully. This would be very useful if can happen.

infinite-system · 2022-12-15T23:21:29Z

It's not documented but yes it's possible to render using existing app context:
import { h, render } from 'vue'

const childTree = h('div', 'some message')
treeToRender.appContext = app._context
render(childTree, document.getElementById('target'))
We can make this a method on the app instance:
app.render(h('div', 'some message'), document.getElementById('target'))
I tested this approach but using the render method I lose props' reactivity. Is that normal?
Yes i tested this approach too and props are not reactive. The only way i found to make them reactive was

const treeToRender = createApp(() => h('div', { reactiveProp: true }); treeToRender._context = app._context; treeToRender.mount('#target');

but i cannot bind the context that way, whereas with the first approach the context is bound successfully. This would be very useful if can happen.

@nikolas223

Exactly my discovery at the moment, second way you showed cannot bind context, but it has reactivity, I really need context :(

infinite-system · 2022-12-16T00:26:27Z

Guys! I figured it out! the full solution to maintain full props reactivity and get the defineExpose() interface! Here is how:

function createComponent ({ app, component, props, el }) {
  
  let expose = null
  
  const childApp = createApp({ render: () => expose = h(component, props) })

  Object.assign(childApp._context, app._context) 

  childApp.mount(el)

  return expose.component.exposed
}

By supplying expose variable into the render function, and then calling childApp.mount(el), the expose variable gets assigned from null to the context, from where you can access expose.component.exposed param to get the exposed interface of your component!

:-)

Now you can use reactive({ props }) as props and they will all be reactive.

nikolas223 · 2022-12-20T13:42:27Z

Guys! I figured it out! the full solution to maintain full props reactivity and get the defineExpose() interface! Here is how:
function createComponent ({ app, component, props, el }) {
  
  let expose = null
  
  const childApp = createApp({ render: () => expose = h(component, props) })

  Object.assign(childApp._context, app._context) 

  childApp.mount(el)

  return expose.component.exposed
}
By supplying expose variable into the render function, and then calling childApp.mount(el), the expose variable gets assigned from null to the context, from where you can access expose.component.exposed param to get the exposed interface of your component!

:-)

Now you can use reactive({ props }) as props and they will all be reactive.

Yes, it works. Thanks! Why does it work tho with object.assign this way and with simple assignment the other way is close to paranormal activity hah

infinite-system · 2022-12-20T18:54:21Z

@nikolas223
Haha, I know right, that's how it felt when I managed to do it, but then now that I thought about it more and it makes sense, since childApp is a parent of the child component defined by the h() function, and render function gets called only on childApp.mount(el) not before.

Fuzzyma · 2023-01-05T10:06:25Z

@yyx990803 are there any considerations around this topic? You mentioned this could be a documented feature and not just a hack.

eddyzhang1986 · 2023-09-14T17:26:12Z

the providers and the plugins seems lost, i must reinstall and reprovides them

eddyzhang1986 · 2023-09-14T17:28:53Z

I did some experimenting using the idea @yyx990803 suggested. Here is a crude demo:

https://jsfiddle.net/skirtle/94sfdLvm/

I changed the API slightly:
// To add
const vm = app.render(Component, props, el)

// To remove
app.unrender(vm)
The reasoning behind my changes was:

We need a way to remove the newly rendered content.

This API for render is more similar to createApp and mount, albeit combined into one (I've glossed over SSR but I don't see any reason that couldn't be supported).

This keeps explicit VNodes out of it.

It ensures that all VNodes and elements have an associated vm. I imagine this'll be easier for the Devtools to handle if nothing else.

The new vm is returned by render. It isn't clear how it would be available otherwise.

I ran into a problem trying to render multiple things to the same parent, which I think is important for the use cases here. In my demo I bodged around it by adding in an extra <div> for each item but that isn't ideal as it pollutes the DOM with extra junk.

the providers and the plugins seems lost, i must reinstall and reprovides them

07akioni changed the title ~~Create app with same appContext? createChildApp~~ Feature Request: Create app with same appContext? createChildApp Sep 11, 2020

posva closed this as completed Sep 11, 2020

hzyhbk mentioned this issue Sep 22, 2020

feat(runtime-dom/runtime-core): support createChildApp #2199

Closed

edison1105 mentioned this issue Jul 23, 2021

使用createApp新创建的app如何继承原来的app里的组件和config？ #4179

Closed

jerosoler mentioned this issue Oct 18, 2021

Can't use i18n inside Node Component jerosoler/Drawflow#274

Closed

larrifax mentioned this issue Jul 5, 2022

Use render instead of createApp when rendering vdom fullcalendar/fullcalendar-vue#181

Closed

marshallswain mentioned this issue Nov 5, 2022

feat(theme) sidebar nav slots vuejs/vitepress#1582

Merged

worldzhao mentioned this issue Jul 9, 2023

Feat/share app context worldzhao/vue-nice-modal#5

Merged

github-actions bot locked and limited conversation to collaborators Sep 29, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature Request: Create app with same appContext? createChildApp #2097

Feature Request: Create app with same appContext? createChildApp #2097

07akioni commented Sep 11, 2020 •

edited

Loading

lawvs commented Sep 11, 2020 •

edited

Loading

07akioni commented Sep 11, 2020 •

edited

Loading

07akioni commented Sep 11, 2020 •

edited

Loading

lawvs commented Sep 11, 2020 •

edited

Loading

07akioni commented Sep 11, 2020 •

edited

Loading

07akioni commented Sep 11, 2020 •

edited

Loading

posva commented Sep 11, 2020

skirtles-code commented Sep 11, 2020

hzyhbk commented Sep 22, 2020

jw-foss commented Sep 30, 2020

yyx990803 commented Oct 13, 2020

skirtles-code commented Oct 16, 2020

mannymu commented Dec 2, 2020

zouhangwithsweet commented Dec 2, 2020

WormGirl commented Jul 5, 2022 •

edited

Loading

aabeborn commented Jul 11, 2022

nikolas223 commented Oct 4, 2022 •

edited

Loading

infinite-system commented Dec 15, 2022

infinite-system commented Dec 16, 2022 •

edited

Loading

nikolas223 commented Dec 20, 2022

infinite-system commented Dec 20, 2022 •

edited

Loading

Fuzzyma commented Jan 5, 2023

eddyzhang1986 commented Sep 14, 2023

eddyzhang1986 commented Sep 14, 2023

Feature Request: Create app with same appContext? createChildApp #2097

Feature Request: Create app with same appContext? createChildApp #2097

Comments

07akioni commented Sep 11, 2020 • edited Loading

What problem does this feature solve?

What does the proposed API look like?

lawvs commented Sep 11, 2020 • edited Loading

07akioni commented Sep 11, 2020 • edited Loading

07akioni commented Sep 11, 2020 • edited Loading

lawvs commented Sep 11, 2020 • edited Loading

07akioni commented Sep 11, 2020 • edited Loading

07akioni commented Sep 11, 2020 • edited Loading

posva commented Sep 11, 2020

skirtles-code commented Sep 11, 2020

hzyhbk commented Sep 22, 2020

jw-foss commented Sep 30, 2020

yyx990803 commented Oct 13, 2020

skirtles-code commented Oct 16, 2020

mannymu commented Dec 2, 2020

zouhangwithsweet commented Dec 2, 2020

WormGirl commented Jul 5, 2022 • edited Loading

aabeborn commented Jul 11, 2022

nikolas223 commented Oct 4, 2022 • edited Loading

infinite-system commented Dec 15, 2022

infinite-system commented Dec 16, 2022 • edited Loading

nikolas223 commented Dec 20, 2022

infinite-system commented Dec 20, 2022 • edited Loading

Fuzzyma commented Jan 5, 2023

eddyzhang1986 commented Sep 14, 2023

eddyzhang1986 commented Sep 14, 2023

07akioni commented Sep 11, 2020 •

edited

Loading

lawvs commented Sep 11, 2020 •

edited

Loading

07akioni commented Sep 11, 2020 •

edited

Loading

07akioni commented Sep 11, 2020 •

edited

Loading

lawvs commented Sep 11, 2020 •

edited

Loading

07akioni commented Sep 11, 2020 •

edited

Loading

07akioni commented Sep 11, 2020 •

edited

Loading

WormGirl commented Jul 5, 2022 •

edited

Loading

nikolas223 commented Oct 4, 2022 •

edited

Loading

infinite-system commented Dec 16, 2022 •

edited

Loading

infinite-system commented Dec 20, 2022 •

edited

Loading