How can I mount a component from outside of a vue file?

[bediu]

I would like to learn how to import a component from a typescript file & mount it at a particular element.

I have been unable to get help in other communities for this question, so I thought maybe I should ask straight here.

I want to simply learn how to do it, but I also might have a small use-case:

All my modals are imported & then mounted inside a Modals.vue file as needed. I could potentially make this process easier by creating a directive, ie, v-render-modal="ChangePassword.vue" that imports the given modal file name & mounts it in my modals div container.

Thank you so much!

[gimjin]

Vue already have a solution，Built-in Special Element Component

<script>
import Foo from './Foo.vue'
import Bar from './Bar.vue'

export default {
  components: { Foo, Bar },
  data() {
    return {
      view: 'Foo'
    }
  }
}
</script>

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

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Math.random() > 0.5 ? Foo : Bar" />
</template>

[bediu]

Hi @gimjin thank you for your answer! I know about that element, however this doesn't explain how to mount a component from outside of a vue file, as I initially asked.

[gimjin]

Like element-plus import in main.ts, used any vue file.

You can write the install function when the typescript file introduces the component, register the plug-in globally, and use it anywhere by component is prop.

⚠But don't use directives render vnode from vue file.

TIP
Custom directives should only be used when the desired functionality can only be achieved via direct DOM manipulation. Prefer declarative templating using built-in directives such as v-bind when possible because they are more efficient and server-rendering friendly.

[bediu]

Hi @gimjin thank you so much for trying to help.

Do you think you can provide me with a short example? I tried looking at how element-plus does it, but I am unfamiliar with the library & the codebase so I got a bit lost.

[gimjin]

https://stackblitz.com/edit/vue-qbgckr?file=src%2Fcomponents%2Findex.js

[bediu]

Oh wow, that did work!

function renderModal(id: string) {

    import(`./../components/modals/${id}.vue`).then(modalComponent => {

        vueApp.use({
            install: (app, options = {}) => {
                app.component(id, modalComponent.default);
            }
        });
    
        ModalIds.value.push(id); // <- ModalIds is a shared/global ref
    
    });
}

Then, in the "modal container" file:

<component v-for="modalId in ModalIds" :is="modalId" />

It feels a bit unofficial, what do you think of this solution? @gimjin

[gimjin]

Recommended use defineAsyncComponent

[bediu]

Thank you so much! This has made my life a lot more easy. I have 1000s of modals & tooltips that I don't have to import manually anymore. I would buy you a drink for the help, dm me your paypal! @gimjin

[gimjin]

Thank you for the offer, but I'll have to decline. Your expression of gratitude is enough for me, and I'm happy to have been able to help.