🍝 Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe - πŸ” Dishes list (part 3/7)

Tutorial illustration

This tutorial is part of the Β« Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe Β»:

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:

  • name with type String.
  • description with type Text.
  • image with type Media.
  • price with type Number (decimal).
  • restaurant with type 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.

Strapi relation

Here is the final result:

Dishes fields

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.

Dishes list

First, create a new store:

Path: store/dishes.js

The 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.vue

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.