--- title: "Turbo Tutorial | Nuxt 3: How to use Vue components in Nuxt Content v2" description: "Learn how to apply Vue components into markdown with MDC and Nuxt 3 Find the code for this tutorial here: https://github.com/Turbo-Tutorials/Nuxt3-turbos/tree/main/nuxt3-vue-components-in-content-v2 Visit https://turbo-tutorials.dev/tutorials/nuxt-3-how-to-use-vue-components-in-nuxt-content-v2/ for…" date: "2022-10-31T16:04:48.000Z" url: "https://timbenniks.dev/videos/tim/028-mg0fevwnue0" youtube_url: "https://www.youtube.com/watch?v=Mg0feVWNUE0" playlist: "tim" image: "https://i.ytimg.com/vi/Mg0feVWNUE0/maxresdefault.jpg" tags: ["content-ops", "frontend"] --- # Turbo Tutorial | Nuxt 3: How to use Vue components in Nuxt Content v2 Learn how to apply Vue components into markdown with MDC and Nuxt 3 Find the code for this tutorial here: https://github.com/Turbo-Tutorials/Nuxt3-turbos/tree/main/nuxt3-vue-components-in-content-v2 Visit https://turbo-tutorials.dev/tutorials/nuxt-3-how-to-use-vue-components-in-nuxt-content-v2/ for… Watch on YouTube: https://www.youtube.com/watch?v=Mg0feVWNUE0 ## Transcript my name is Tim bennings and this is a turbo tutorial so in this tutorial we will be having a look at how you can add few components with next content feed 2 and there's this whole lovely new markdown language it's called MDC that the next team came out with and you can really nicely and easily add your view components into these markdown files so let me show you how you do that so we're here in my vs code and as you can see this is a next three project and I've loaded the next content module and so I've set it up in a way where I'm actually using next page so I have a Pages folder within it a slug and basically I'm using the content doc function if you want to know more about that go to the next content V2 documentation but what that means is every file that I put in the content folder actually becomes a root automatically so I have an index root and an about root actually about if basically this home goes back to back to home it's very simple so let's have a look at this index root here and so you can see my header one and then here I have a component called cast member and you can see this is Rachel maybe you should take a break which is basically from the TV show Friends which I love and so that component is actually here in components slash content and then the component that's important it has to be in the content folder and so that is very simple it has two props a line and a name so Rachel and whatever line she says and as you can see I've also added a slot here and we can show that off in a second so basically um if you go back here to this index markdown this is the way you can add components in MDC so let's have a look how this looks and then after this I'll show you another way to also do it so in the browser let's refresh so we have next content with friends that's the header one and then this is that component Rachel and maybe we should take a break let me just zoom that in for a sec there you go um I've also added that slot right in this component here slot so what I can do actually when I go back to the markdown file I can actually do this is a slot and this is now rendered inside that component and so this is a really nice and easy way to be able to add components or from few inside markdown there's also another way and I take that from my clipboard you can also do it simpler right cast member with one column and then the rest is kind of like props so when I refresh this one there you go it works exactly the same and this just makes editing in markdown really simple and um there you go that's what I wanted to show you I think next content is super awesome and as far as I know the next Lab themes are doing a lot of work on the content and the markdown stuff going forward so I'm very excited about that anyways that's what I wanted to show you if you have any comments questions remarks go to the comments and I'll see you in the next one cheers foreign [Music]