How can I mount a component from outside of a vue file? #8137
Replies: 9 comments
-
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> |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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.
|
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
https://stackblitz.com/edit/vue-qbgckr?file=src%2Fcomponents%2Findex.js |
Beta Was this translation helpful? Give feedback.
-
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:
It feels a bit unofficial, what do you think of this solution? @gimjin |
Beta Was this translation helpful? Give feedback.
-
Recommended use defineAsyncComponent |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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!
Beta Was this translation helpful? Give feedback.
All reactions