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.
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.
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.
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.
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!
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?
did you do: `import ComponentA from './ComponentA.vue'; or `const ComponentA = import('./ComponentA.vue')` or better yet `const ComponentA = defineDynamicImport(() => import('./ComponentA.vue'));`
@@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.
@@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)
