Description
How to use Vue components in Nuxt Content v2
Personalizing for interest: nuxt3, vue3 and complexity: easy. Manage your personalisation profile.
my name is Tim Benniks 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
Description
How to use Vue components in Nuxt Content v2
Tags
Links
Metadata
How to use Vue components in Nuxt Content v2
Learn how easy it is to add rich schema.org data to your Nuxt 3 application
Similar: 74.82%
Learn how to add information to the head of the page with Nuxt 3
Similar: 74.82%