This tutorial is part of the « Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe »:
- 👋 Intro
- 🏗️ Setup (part 1)
- 🏠 Restaurants (part 2)
- 🍔 Dishes (part 3) - current
- 🔐 Authentication (part 4)
- 🛒 Shopping Card (part 5)
- 💵 Order and Checkout (part 6)
- 🚀 Bonus: Deploy (part 7)
- 👏 Conclusion
Note: the source code is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nuxt-strapi-deliveroo-clone-tutorial.
🍔 Dishes list
Congratulations, you successfully displayed the list of restaurants! This was the first major step.
Define Content Type
Every restaurant sells dishes, which also must be stored in the database. So, we now need a new Content Type, obviously named
dish. Since you already know how to create it, I am going to give only its attributes:
Relation: this one is a bit more specific. Our purpose here is to tell to Strapi that every dish can be related to a restaurant. To do so, create a one-to-many relation, as below.
Here is the final result:
Add some entries
Then, add some dishes from the Content Manager: http://localhost:1337/admin/plugins/content-manager/dish. Make sure they all have an image and are linked to a restaurant.
Go back to the frontend code. The steps are pretty similar to the restaurants list.
First, create a new store:
The dishes page must be accessible from
1234 is the id of the restaurant. Nuxt creates urls according to the name of the files located in
pages. For that reason, you have to create a new file named
Nothing particular here: exactly like for the restaurants, we define a template and add the logic in the script section.
🔐 In the next section, you will learn how to authenticate users in your app (register, logout & login): https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-authentication-part-4-7.