If you’re still here, then woweeeee, you do have patience hehe. If you’ve stumbled across this post and would like to know more about this flaming hot candle shop then look no further:

So I know Christmas has come and gone, and your shop wasn’t quite ready for Christmas but don’t let that disappoint you, let’s get fired up again, and light up your January by finishing the last few steps of your brand new shop. You can show it off to all your friends and get them to buy lots of flaming hot new products.

If you are the sort of person that prefers to watch their candle shops being made rather than reading about them being made, here's part 3 in video form. If not follow along below.

You can get the code for the finished front-end and backend below.

We’re going to start by building out a couple of new components:

ProductTeaser.vue so we can loop over the products coming back from our Strapi backend and they’ll all have exactly the same styling. The product teaser will look like this:

ProductImage.vue will display the product image. It will ensure they are always square and will compute the URL for the image from the data received back from Strapi. So let’s go ahead and make these inside the components directory.

This is a pretty simple component that takes the product as a prop and outputs its image within a div.

We use the Tailwind aspect ratio helpers to ensure the result is always square.

We also use a computed property to generate the correct URL for the image. The URL provided by Strapi is relative so we need to make it absolute by adding the API url defined in our env to the front.

The product teaser component takes the product as a prop and uses our new ProductImage component and outputs the product image as well as displaying the product name and price. This will be the component we use to display products whenever they appear in a product list.

We now need to create a single product page template. It will look like this:

It will also have some related products on the page as well like so:

If you create a new directory called product inside the pages directory and create a file called [id].vue .

Dynamic routes with Nuxt

By creating the single product page at pages/products/[id].vue it allows us to use Nuxt’s dynamic routing to create pages for each product in our shop.

In our component we can get the current product id from the route params. We can then use this to adjust our query to Strapi so we load a single product.

To do this we first get a reference to the current route:

Next we use the id route parameter to construct our request to Strapi in Nuxt’s useFetch hook.

👉 Notice the ?populate=* query param. This tells Strapi to load all of the model's relations. Without this, the image fields would be empty and we wouldn’t be able to get the URLs for the images.

Once we have the product data, it's just a case of using it in the template to display your candle.

Creating a Vue 3 input field

You might have noticed there is one more missing component on the product page above. An input field. This will be used to allow the user to adjust the quantity of the product.

This is just a basic input with a few prop bindings. The most interesting thing here is the use of the modelValue prop. This will allow us to use this component using the v-model syntax. Notice the @change handler. This will update the parent’s v-model whenever the input changes.

Finally, now we have a single product page, we need to add a link around the product teaser so the user an actually get there!

That's it for the time being. Hopefully, you enjoyed seeing your candle shop come together? As always if you have any questions please reach out to us: @pixelhopio.

In the next post, we will be adding the final magic to turn out candle shop into a fully functional e-commerce store when we integrate Snipcart. If you don't want to miss out on part 4, be sure to subscribe to our newsletter, subscribe on youtube, or follow us on Twitter!