Wednesday, 4 July, 2018 UTC
Summary
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:namewith typeString.descriptionwith typeText.imagewith typeMedia.pricewith typeNumber(float).restaurantwith typeRelation: 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.
Display dishes
Go back to the frontend code. The steps are pretty similar to the restaurants list.
First, create a new store:
Path:
store/dishes.jsThe dishes page must be accessible from
http://localhost:3000/restaurants/1234.js where 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 _id.vue in pages/restaurants.Path:
pages/restaurants/_id.vueNothing 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.