Building with Sanity and Nuxt with Ekene Eze
Nuxt Dynamic Pages
In the last lesson, we successfully connected our sanity application to this Nuxt front end. And we displayed our products.
Something that we missed out on in the last lesson is to properly tell sanity where our front end will be reaching out from. And that is done in the sanity dashboard right here.
Since our Nuxt application is running on port 3000. We should add it as a recognized origin in our sanity application. So we don't face any CORS errors in the future when we make requests to sanity.
So click into the project, go to settings. Go to API.
Click on, add a new origin. And add the origin where your front end is connecting from. In my case, it is on port 3000.
And do that. And now we are all set.
So in this lesson, We'll make this product listing page look a bit better than this. And also implement dynamic routes for individual product views.
So that when you click on any of these products, you'll go to a unique route where you can find more information about the said product.
So to get started let's go back to visual studio code.
Here. We just have a template section And a script section that sends our request to sanity.
Next. Let's update our sanity query to specify exactly what properties we want to fetch from our sanity products.
At the moment we're fetching all properties of the product.
We can go ahead and be more specific about the details we want by specifying them here. So we want the title.
And we want to slug.
And we want the product ID.
And we want the price.
And we'll get that from.
If this looks a bit confusing, let me show you why I'm doing that. Back in sanity studio, if you run the query to fetch all products, You see that it returns an object called default, product variant, where the price is. Also, the image is as well, but we'll get to that.
Actually, let me copy this. Just to be sure that I didn't make any mistakes with the spelling.
Okay. And the next thing we need is the product image. And let's call it.
And we also get that. From the default product variant object.
Let's do dots images. This is an array. So select the first image.
And gets the image URL.
And the lesson we need is the blurb.
Which we'll get from blurb dot EN
and this is what our product query is going to look like now.
With the styles and the script section done. The next thing we want to do is update the template.
So I found a very nice template on w three schools. I think. For product listing. Somewhere online. And I really liked it. So I'm just going to use it here and save us all, some valuable time of typing it all out. So just go ahead and grab it.
And paste it here.
So basically I have. Some headings and some paragraphs. And in this div. I am showing the product title here. I'm showing the blurb. And then In this content block, I am showing the product image. And down here, I have a link which you can click on to go into the individual product page. And we're doing that with nuxt link. So if I save this.
If I have done everything right. We should now get a better looking. Okay. This is wrong. Let me do blurb dot EN
I don't spot any more errors. So if we come back here, and refresh this page. Now. We are getting a much better looking product listing page.
However, if you click on any of the products. You get a 404. And that is because, in our nuxt link, we passed in the route, which is our product slug. And that is what you can see here. However, there's no existing page for these dynamic routes in our application.
So to change that let's go back to vs code. And inside the pages directory, we'll create a new file. Let's call it underscore slug dot vue and the first thing we want to do is write a query that will basically use this slug. And make a request to sanity to fetch this particular product so that we can display it on this page.
So let's just copy the existing query. And modify it a little bit. So we get the script.
We put it here. And what do we want to do is pass in. params here.
And this will give us access to the slug that we have in the URL.
Now, instead of making requests for the products alone. We can modify this query to make sure that we are querying for not just the product.
But also the one that matches the slope that we passed in. And that is slug dot current equals.
Params dot slug.
And this way we are making a request to sanity. To fetch this product where the slug.
Is the one we passed in from the index page. The one would pass it in from here.
And that is the one that we have on this link. So great. this will return an array. So we'll probably want to just get the first one.
Awesome. Once again, I have the styles for this. So I'm just going to.
Paste it in here. To see if we're sold valuable time.
And I'll go ahead and also grab a template for this.
And put this here. So let's do a quick walkthrough. We are showing the product image. Which is coming from. Awkward. This should be product, not products.
Which is coming from here. We're showing the image here and we're showing the product title. And we're showing the price and this is just a bunch of lorem. Ipsum. For product description. These are just dummy data for quantity and two buttons to add to cart and to buy now.
So if we save this and come back.
There you go. Now we have individual product pages in our application. And this is also as far as we go in this lesson in the next lesson, we'll go ahead and deploy our front end Nuxt application. And also our sanity application. So that both of them can be accessible from anywhere in the world.
See you there.