Write Reusable Code with Vue DYNAMIC COMPONENTS

[@astrosoup]

These short videos are incredibly helpful to a learner like myself. Thank you for making them!

[@LearnVue]

glad you like them!

[@ericjunior105]

I don't know how to say this but your account is a life saver. Short, precise and useful

[@LearnVue]

❤️

[@biliyonnet]

I used it to convert markdown to vue. First I found markdown directives in document and then convert them to vue component like "*italic content*" to "italic content and then I was have a valid vue template string, so created an object with it and gived it to the and then created and feed the dynamic component with that md components like italic and others.

[@thomaspotterdotexe]

But what about reusable the component from vue component like the vuetify form input or ant design vue table select input form?

[@前端小智]

Hi, can I translate the article from Learnnvue website into Chinese and share it to more developers? I will write the original author and the address of the article.

[@gurkengerd9981]

Isn't that pseudo-dynamic since at implementation time you need to know which types of component can be passed in? I am comming from a Jetpack Compose background and in many components with have a simple content parameter, in which we can pass ANY component we want and it gets rendered flawless.

[@nyambe]

This did NOT work with script setup, component :is= wanted the component itself, the name alone was not enough. Is that because they are not being exported?

[@ColinRichardson]

did you do: `import ComponentA from './ComponentA.vue'; or `const ComponentA = import('./ComponentA.vue')` or better yet `const ComponentA = defineDynamicImport(() => import('./ComponentA.vue'));`

[@nyambe]

@@ColinRichardson I used DynamicImport . I was using script setup. Regular import as shown, did not work as expected.

[@ColinRichardson]

@@nyambe should work then.. unless you accidently did `import './ComponentA.vue'` Because what you do then, is import the component with no name associated with it.

[@nyambe]

@@ColinRichardson DynamicImport did work, regular import did not. Not sure why. With script setup, there is some doc on that. Google it

[@RobertWildling]

@@ColinRichardson What about the `comp` variable? How is that one supposed to be initialised I Vue 3? (I think a separate video about DynamicComponents in Vue 3 would be very helpful.) I needed to do this to make it work (but is it the best way?): import { shallowRef, defineAsyncComponent } from 'vue' const ComponentA = defineAsyncComponent(() => import('../components/componentA.vue')); const ComponentB = defineAsyncComponent(() => import('../components/componentB.vue')); const comp = shallowRef(ComponentA)

[@Revadike]

Often components have unique attributes, so then it's usually better to just use v-if

[@alexwakeup7098]

You can use provide/inject to pass those attributes without the need of defining them

[@mjkodonk]

Save my day. Thank you

[@_q1b_]

Can you make a video on render function

[@gabrielmachado5708]

You can also pass the component as a variable, and not necessarily need to have the component registered

[@markusandressen2171]

Hey LearnVue, thank you for insights. Wanted to ask, could you make a tutorial on how to do SSG (Static site generation) with Vue 3? Tried a few solutions such as vite-ssg and vite-plugin-ssr with no success due to lack of experience.

[@LearnVue]

definitely will be looking into this topic for future videos. i recommend checking out vitepress or gridsome in the meantime though!

[@fadlaichsan4924]

Wow, that's cool! Can you make animate scrolling page with vue js?

[@achuagbama2699]

I recommend Netninja tutorials on vue animations with Gsap

[@thomaspotterdotexe]

I'm new in Vue and the only problem I have is how to pass data to the targeted components while every components have different props :(

[@LearnVue]

Hey there! One solution would be to accept a single object as a prop for each of the dynamic components, and then you can destructure that object on a per-component basis depending on which data it needs. I'd recommend setting up custom validators for that prop though!

[@habalgarmin]

I don`t like dynamic components because it's hard to use it with TypeScript.

[@augischadiegils.5109]

thanks

[@codybass8873]

👍

[@前端小智]

good

[@abdianrizkyramadan1535]

Cool