--- title: "Headless commerce with #Nuxt and #Tailwind." description: "SKNCRE is a composable commerce demo with Hygraph, Nuxt, Tailwind, and an external API for product data." date: "2024-02-07T10:45:37.000Z" url: "https://timbenniks.dev/videos/hygraph/009-e9jxm4h4a48" youtube_url: "https://www.youtube.com/watch?v=E9jxm4h4A48" playlist: "hygraph" image: "https://i.ytimg.com/vi/E9jxm4h4A48/maxresdefault.jpg" tags: ["composable-architecture", "cms", "api-design", "content-ops", "performance"] --- # Headless commerce with #Nuxt and #Tailwind. SKNCRE is a composable commerce demo with Hygraph, Nuxt, Tailwind, and an external API for product data. Watch on YouTube: https://www.youtube.com/watch?v=E9jxm4h4A48 ## Transcript this is Tim from hgraph and in this video I want to talk to you about a new starter kit that we created for hgraph and it's dipping its toes in composable Commerce because that's a super interesting and upcoming thing at the moment or probably been the last few years right and so before startups I worked at agency and I did a lot of work for bigger platforms that are luxury Cosmetics jewelry things like that and so I thought why not grab the essence of what a fan fancy brand wants to do in cosmetics and make a starter kit for you to figure out how that all works right how you can give you some building blocks to actually then work with for later and so we came up with a brand called skincare but with a bunch of fowls taken out so it's like a a fancy product name now and so I had these designs from a hackathon I did a while back and I thought I'm going to grab this designs and make you a starter and so as you can see here on the screen skincare is is a super luxurious brand that sells three only three different things for the skin and it's all based on snail slime and you can buy routines and there's product highlights and subscriptions and super editorial Rich Lush animations and well I say animations I took them out actually because they were a bit much but um you can see this looks like something that is um High tier expensive and I thought why not show you something like this for a CH right it's a proper luxurious demo and I was a little cheeky you can see performance accessibility SEO is all 100 let's just remove that for now we don't really need it and so when it comes to um composable Commerce especially at scale what you see is that product information is generally enriched in a system of its own with specialists at the Brand level doing that and then the CMS itself tends to work with Pages like these right like super nice edit tutorial component storytelling and then um having a shopping cart or a checkout or you know Payment Systems is again another part is a Commerce engine and so in this St um this starter kit I chose to say you know what we're going to grab information from an external system that's all product stuff we're going to put it in the CMS and we're going to build these lovely pages and then leave it open for interpretation how you want to make the shopping cart or the the checkout and if you don't if you're like I don't know how that works just wait a bit because in the coming weeks and months we will be adding to this Starter by creating Integrations with things like Commerce layer maybe Commerce tools big Commerce a whole bunch of different ones to show you how you could do it for now let's focus on the data first so you can you know see how this works so in high graph here you can see this is my skin care um project statistics and stuff first and foremost let's think about that schema and how it works to get that information in from an external place and so we have remote source for Federate disc skincare and so Federate disc is something that our defro team has been working on for a while now and so Federate this is actually a platform that has mock API data that we can use in a myriad of different demos right so we have generic products we have reviews we have movie information from the omdb or we have def2 block routes there's a whole bunch of things in here you can see skin care fake product line and so this is um graphql endpoint that you can use in any demo that doesn't require user IDs credentials money none of it so because we use this you can just clone this project here and just get it for free out of the box you don't have to do anything it just works and so this is a graphql source so it fits like a glove into high graph and it literally becomes like you query that system but you don't know because because you're querying High graph and high graph makes it feel like it's completely native so with that out of the way you can see there's a bunch of models for Pages product pages product Focus that's like a little component inside um for example this is a product Focus component then we have like um a related product component which is let's go to a product page here something like this related products based on this product of course and so I called those components I shouldn't have said that these are models and these are components what those are we'll see in a sec let's just go and see how this homepage was built so um as you can see the homepage here actually has a hero it has a routine component to show off you know whatever range you can buy here it has a product highlight for the face serum and there's some editorial related stuff like a lovely image a product ion here or like a card and then hey there's a subscription model as well go for it right and so so we've done that by using something we call High graph components if you want to know in depth what that is there's a link in the description to the documentation and so a component is just a a schema but it's attached to the page here so this little hero here with the three forms or for the three Fields you won't find it floating around and query it on your own it's actually connected to this page because what you can do now is say well let's move it down a sec or move it up again like you can do a bunch of things as a Content editor with these components that make it life a bunch easier right so this is like the bit of the page builder type approach in hgraph next to the super strong data stuff that we do but you can see there's also a product highlight and in here what I decided to do is not have Fields but actually have a relation field to a product focus and the product focus is a thing on its own and those do live all over the place and you can query a bunch of those if you want want um I just wanted to show you different things and so this one you can see here has a product ID and this product ID one we can have a look at that here when we go to products and you know do the playground product ID one is has bunch of ingredients for snail slime and it's actually the face serum so by just adding this now hgraph knows because it has this Federated API you Federate this in there that it just returns you that thing there so when you now go to this page this information is actually in the query that you can do just by querying High graph if you want um let let's just do that so I can show you so we're looking at the homepage right so let's go to the playground let's go and open the page and say well the slug has to be home and we want all the components and let's go to the product highlight which has a product Focus attached by one of those links so let's have the CTA description ID let's let's but let's see what what we need the product information ingredients name price title and what else do we need um the slug of the page itself this just whatever it this is let's have a look and so now for home we have the components which is what we were just looking at right the things you can drag and drop and this is our product Focus component and there's the information about the product itself and this part is actually coming from Federate this which is here and so it feels completely native you can just query all the things in here with one query and get the stuff that you need and so that's what you're seeing here and so it's kind of native to high graph now to use this stuff and content editors don't have to worry as much of understanding how it works with these external apis it just works out of the box and then we have product pages for example um a product page page has its own slug a title description OG image related things right and then it has a bunch of components again so we're literally just building these Pages up but then after the components you can see there's another product ID right and so um if we look at let's have a look at the schema of this thing to show you how it actually connects that up so when we go to a PDP schema you can see there's actually a graphql remote field for a product and if you have a look if we edit that it's actually going to Def Federate this remote source with a post and it's just querying that system so this system and we're giving an ID and the ID that it queries is the doc product ID which is in turn this field here and so when we now go to the normal product page this ID one that I type here will actually then query a product in here so we can just rather than products we can go to product ID is one and give me the name hit play face serum right that's exactly what high drive is doing for you here and um then you have a bunch of those components you can drag around again and so this feels like um a good vibe for a Content editor and a developer doesn't have to understand how to query anything else um so with that in mind now that we know the basics um let's have a look at how the front end actually works because I used njs i a n ambass I'm a longtime user of the system I love it it makes me go super fast and of course if you're not a n juicer but you like next and react or you like spel kit or you like Astro join us at slack. hyra.com and tell me Tim I want this in Astro Tim I want this in next and you know what we might do it because why not it's not that complicated to build these things because it's mainly you know creative driven we can we use Tailwind for this this we can do something like this in next Astro swel kit as well um so let's have a look at what we have here in next so this is a relatively simple n app so it has steelwind it has the next graphql client because we have to query graphql we use some Google fonts and we have next image and why that is cool we'll look at that in a sec and so we have two routes just the home and the product pages and fancy font family and there's not that much to it right so we have to look at the pages we have an index page and so what I've done here is actually we have a composable called use page use page if or composable can also be potentially a hook in in next but it does slightly more and so um you can look at that composable here and epage will actually just query graphql uh through whatever we have in the environment variable here for the graphql host by the way I'm going over this super fast if you want to know how that specifically works there is a video that I will link in the description or put one of these cards where you can see how I set up n specifically with this way of doing graphql cuz it's super cool we actually have a page query that I just put here in a file and this will now be um using Code gen and um a whole bunch of extra helper functions in N that just let you use this stuff all over the place right so when in my use page I just say you know use async graphql for the type page or product page with this Slug and then all my information is there I I don't have to do very much custom stuff here um let's see what else do we have so there's a few things that make your life as a developer happy in this setup first of all images images are always complicated right and so what I decided to do is actually actually you saw it already a little bit here we're using n image and N image really helps you to do stuff with responsible images responsive images lazy images things like that and we created a provider for hgraph because hgraph can actually do cropping um doing different um quality settings different file type settings you don't want to do that by hand so I made a provider so the next image can just say give me quality 90 this type of prop with and height run and make it responsive so without going too deep in that like there's a whole bunch of like concatenation of you know URLs and in the end it will help you a lot when you look at the hero for example you can use a n image with a provider High graph an image that just comes out of high graph and then you can say well I wanted for small screens to be 100 VW so 100% and you could actually then say for medium I want this to be 50 and now it will just do a whole bunch of responsive image stuff for you and the quality can be 90 and you can do a whole bunch of really cool stuff with this and it just helps you a lot as a developer not to not just have to think about images because images are complicated and um this is very similar to what you see in next image for example it's almost the same thing and so the next thing that I built is actually a little plug-in to turn on preview mode and so let me show you how that works so when we actually go to a page oh so in the content Pages you can see this one is draft here and um right now if I were to go to that page SL test it wouldn't work because we're not we're not quering draft reest quing published right so test will give you a 404 so what I've now done I've set a preview here so when you click it you can see it say question mark preview equals true and you see a little lightning here in the top and suddenly you see my test page so when I remove preview again you no longer see it and so these are just like the simple thing so when a Content editor is actually creating a new page but they haven't hit published yet you hit preview you can see directly what you're doing so you can actually say whatever hit save refresh and oh that's the title on the on the browser sorry let me just put that here and there you go and it's is directly viewable while already deployed on for sale and that's the beauty of the N preview mode and so you can actually preview everything you do even if it's not published so that works super well and um let's see I think that's about it for this video I know it's been quite long um I'm hoping you um enjoy this stuff please join us on our community at slack. hyra.com try this thing out clone it check the description for all the links that you need and a blog post about this and cheers happy coding