Nested components in template generated by PHP.

[mrFANRA]

Hi!

I have template rendered by php:

<div id="vueApp">
    <h1>Im header</h1>
    <div is="vue:testcomponent">
        <div is="vue:othercomponent"></div>
    </div>
</div>

With that Vue code all working fine:

import { createApp } from 'vue/dist/vue.esm-bundler';
export const app = createApp({});

import testcomponent from "./components/testComponent.vue";
app.component('testcomponent',testcomponent);

import othercomponent from "~/components/otherComponent.vue";
app.component('othercomponent',othercomponent);

app.mount('#vueApp');

But when I try register component inside other component its not work ...

app.js

import { createApp } from 'vue/dist/vue.esm-bundler';
export const app = createApp({});

import testcomponent from "./components/testComponent.vue";
app.component('testcomponent',testcomponent);

app.mount('#vueApp');

./components/testComponent.vue

<script setup>
import {getCurrentInstance} from "vue";

const instance = getCurrentInstance();
import othercomponent from "~/components/otherComponent.vue";
instance.appContext.app.component("othercomponent",othercomponent);
</script>

<template>
  <div>
    <slot />
  </div>
</template>

Im used inline-template in vue2 ... but how to make in vue3 I dont understand.

Im understand, slot is compiled. Maybe is it possible recompile after component registration or has other ways?

Help me please!

[trtajim]

I think the timing is the main issue here.

By the time testComponent's setup() executes, Vue has already compiled the parent template and resolved the components used inside the slot. Registering othercomponent at that point only affects future component resolution—it doesn't cause the existing slot content to be recompiled.

So I don't think calling:

instance.appContext.app.component("othercomponent", othercomponent)

inside setup() can work for this use case.

Out of curiosity, what problem are you ultimately trying to solve?

If the PHP template is dynamic and you don't know all of the possible components ahead of time, there may be a different approach (such as registering them globally before mount(), or using dynamic components) rather than trying to register them during rendering.

[ORCHORDS]

The existing answer is exactly right about the timing. Here's the complete working solution for the dynamic-PHP-template use case.

Why registering inside setup() can't work: the parent's template is runtime-compiled (you're using vue.esm-bundler.js, which includes the runtime compiler), but the compilation happens before the component's setup() runs — during mount. So by the time testComponent.setup() registers othercomponent, the parent's compiled render function has already resolved all unknown tags in the slot and tagged them as unresolved components. There's no "re-resolve" hook — you only get one compile per template.

The fix that actually works for your case — use <component :is="..."> with a runtime map of registered components, instead of hardcoding component names in the PHP template:

<!-- PHP-rendered -->
<div id="vueApp">
  <h1>Im header</h1>
  <testcomponent>
    <othercomponent />
  </testcomponent>
</div>

// app.ts
import { createApp } from 'vue'
import testComponent from './components/testComponent.vue'
import otherComponent from './components/otherComponent.vue'

const app = createApp({})
app.component('testcomponent', testComponent)
app.component('othercomponent', otherComponent)
app.mount('#vueApp')

Register everything before mount(). If the list of components is dynamic, fetch the list from your PHP endpoint or build the registry from a build-time manifest, then register them all synchronously before mounting:

// For truly dynamic component sets:
const available = await fetch('/api/available-components').then(r => r.json())
for (const { name, loader } of available) {
  app.component(name, (await loader()).default)
}
app.mount('#vueApp')

Alternative — keep dynamic registration but route through <component :is> so you don't depend on tag-name resolution:

<!-- DynamicShell.vue -->
<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  component: string          // e.g. 'othercomponent'
}>()

// Single source of truth — register them all up-front in app.ts
const registry = useComponents()  // your own composable returning a Map<string, Component>
const Resolved = computed(() => registry.value.get(props.component))
</script>

<template>
  <component :is="Resolved" />
</template>

Now PHP emits:

<div id="vueApp">
  <DynamicShell component="testcomponent">
    <DynamicShell component="othercomponent" />
  </DynamicShell>
</div>

Every nested layer is resolved at runtime through the registry. Adding a new component becomes a server-side change plus a registry entry — no rebuild, no setup() timing issue.

One thing to avoid: don't reach for instance.appContext.app.component('foo', Foo) inside a child's setup(). It looks like it should work, but Vue caches the component resolution per render function, and the parent's render function was compiled before that registration happened.

Note on bundle size: you're using vue.esm-bundler.js which is the runtime+compiler build (~33KB extra over runtime-only). For a PHP-rendered shell hosting Vue widgets this is the right tradeoff; for a SPA, switch to runtime-only + SFC templates so Vite can tree-shake.