Nuxt 3 with Content v2 and Uniform is magic

what is up i'm back for another video so this is tim from uniform and as you probably know i love to use nux and view and so now that nox 3 is getting more stable and they release their next content v2 i felt like okay i'm just gonna want to use this but also try to combine it with where i work at uniform and at uniform we are able to kind of fetch data sources from different places and let content editors actually edit with these without knowing about these places but for developers that could be like okay i don't really need that i'll just code it inside my app and then later on i might choose to use some other stuff so what i thought is like why not combine both worlds why not use markdown files because us developers love to use these right and then integrate these markdown files through github into uniform and then i can actually kind of compose my page with some drag and drop stuff that i'll show you in a sec and with that um i would still edit locally in my code or in github or wherever i want but i also then have the power of uniform so let's go to the browser so i'll show you how i've integrated this because it's kind of an alternative view on how you can do nox3 with the content module all right so this is my project in uniform and here if you look at the integrations i have cloudnary that's where my images come from i have my markdown integration that i made myself just a while back to show you that and i have a for cell integration because i can actually now say okay look at my website on for sale and so uniform has integrated with this so when i hit build in a second you will see that happen on for sale as well same for preview so let's have a look at that markdown component here or that integration so i basically just have a repository and owner and the file path that uniform has to look into so when you actually look at my presskit website this is open by the way you can just go here and look at the code see what i've done and so in the content folder according to how that should work with nux3 content v2 i have a bunch of mdc files so markdown with components in it like when you look at my mc paragraph here i have a title component that's actually a view component that is rendered through here and then there's a whole bunch of like other titles and some icon components and some paragraph it's just a normal markdown file basically and you can actually if you look at it raw it's maybe a little bit easier there you go so that's all the stuff that's in there um so now when you go to uniform i have actually created a component library with details the mc thing that you just saw my heroes or media stuff and those components are actually a parameters that connect to github to my markdown file so i made a landing page and before we have a look at what all this does let's just preview it and so preview is actually connected to uniform and for cell and the nuxed preview mode let's make that slightly smaller so it's a bit easier to see all right so here i have my hero i have a little intro and i have some two biographies a big one and a small one i have some details about myself this mc paragraph that we just looked at some media related stuff and my latest talks and so this is all running on next three with with content v2 and uniform so if i actually wanted to like um let's have a look at this this mini bo here so i have a rich text component that is looking at my mini bo but actually if you remove this you can select all the stuff and these are actually my markdown files that uniform found in github right so ins if i instead of my mini bo put my intro here and hit accept and save the preview in next automatically updates and there is actually that paragraph but this paragraph is actually the rich text component right you can see that here on the left and that right text component is literally just a markdown file that is now added in there and we can actually see that in the code where i am so basically you can see very simple next convic i have um next content and uniform next and it's really very simple so when you look at my components here this is this rich text view file you see i'm using the content renderer but the way i'm actually getting the file the markdown file is through actually getting the component parameters from uniform which actually in the id says hey but this is the intro there's the mc or whatever and i'm literally just querying that like this as a file in my content folder right where is it here content intro and this is just a normal markdown file and so this is slightly different than you would normally use these markdowns files with because i'm not doing any routing i just have a homepage which a whole bunch of components i want to drag and drop around basically and so basically let's fix this again so let's fetch my mini bo um and so now you're kind of just working with um all these different kind of systems inside uniform because i can also if i want to um change the title here let's see if that works there you go it needed an extra update for that mini bl to come in but i can also change my cloutinary stuff i probably have to log in oh no i'm logged in that's nice so let's just take this french dude and hit save and once that updates if it does here we go there it is and so effectively in uniform you can now kind of work around some stuff um with different headless sources but also your markdown files and if in the future rather than having this mini bo as in markdown file but you have a cms what you can actually do is you can actually just edit this component here and you can add another data source to it so if you want to move away from markdown files and you want to go into let's say a cms you can actually add another parameter here and the parameter type of your cms would be here so how about we quickly go to an integration and add that for you to show you [Music] for example let's go contentful let's add that to my project and log in yep logging in with github and so this is my contentful entry entrance uh here we go and i have to choose my space master okay so now we have a connection to contentful in here so what i can do is go back to my component library and for that rich text actually add another parameter called whatever cms anything you want and now we have a contentful entry here and we okay we connect it to my default space and then there's a rich text component as well about that okay so let's save this and go back so in my landing page here now i actually have my markdown for the rich text right the one i've selected here the intro but i can also select let's say my about whatever thing i have in um contentful how about my gear stuff like that and now it's actually selected that and of course you can see my in my the thing i coded for markdown is is basically alpha i just did that quickly so i don't have an edit button that goes to github but it's very easy to add that myself and actually here i could actually just click edit and go into contentful and edit whatever i need to edit all right let that load for a sec ah there it is that's all my gear and now if you actually look at the source that comes out is so not my hero but here's my rich text so i have a markdown file type that goes okay fetch me intro dot markdown or i have a cms type that is now an entry for contentful and this way you can kind of slowly adapt and add other components and headless sources but it feels the same to use i'm going to stop the video and actually refer back because my live website now has a french dude on it but this is what i wanted to show you how you can actually use nuxt with all the new stuff they're building without needing a cms but having like this flexibility to demo this to your boss or your project manager or your client and say hey we can actually build you this thing as a poc and then later when you choose your cms or whatever you want we can add that in and it's not that much extra effort so if you like this stuff or if you don't then you want to talk about it actually come to our discord server it's called uniform.2 discord and we will have a free invite and you can talk about everything you want and see you there cheers