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) - current
  • ๐Ÿ” Dishes (part 3)
  • ๐Ÿ” 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.
๐Ÿ  Restaurants list
First of all, we need to display the list of restaurants in our web app. Of course, this list is going to be managed through our API. So, we are going to start configuring it.

Define Content Type

A Content Type, also called a model, is a type of data. A Strapi API includes, by default, the user Content Type. Right now, we need restaurants, so our new Content Type is going to be, as you already guessed, restaurant (Content Types are always singular).
Here are the required steps:
  • Navigate to the Content Type Builder (http://localhost:1337/admin/plugins/content-type-builder).
  • Click on Add Content Type.
  • Set restaurant as name.
  • Click on Add New Field and create the followings fields:
    • name with type String.
    • description with type Text with Rich Text Editor (in the Advanced Settings section of the modal, select Display as a WYSIWYG).
    • image with type Media.
  • Click on Save.
At this point, your server should have automatically restarted and a new link Restaurant appears in the left menu.

Add some entries

Well done! You created your first Content Type. The next step is to add some restaurants in your database. To do so, click on "Restaurant" in the left menu (http://localhost:1337/admin/plugins/content-manager/restaurant).
You are now in the Content Manager plugin: an auto-generated user interface which let you see and edit entries.
Let's create a restaurant:
  • Click on Add New Restaurant.
  • Give it a name, a description and drop an image.
  • Save it.
Create as many restaurants as you would like to see in your apps.

Allow access

Having the items in database is great. Being able to request them from an API is even better. As you already know, Strapi's mission is to create API (I have got a super secret anecdote for you: its name is coming from Bootstrap your API ๐Ÿ˜ฎ).
When you were creating your restaurant Content Type, Strapi created, behind the scene, a few set of files located in api/restaurant. These files include the logic to expose a fully customisable CRUD API. The find route is available at http://localhost:1337/restaurant. Try to visit this URL and will be surprised to be blocked by a 403 forbidden error. This is actually totally normal: Strapi APIs are secured by design.
Don't worry, making this route accessible is actually super intuitive:
  • Navigate to the Roles & Permissions section of the admin plugin (http://localhost:1337/admin/plugins/users-permissions).
  • Click on the Public role.
  • Tick the find and findone checkboxes of the Restaurant section.
  • Save.
Important: do the same thing for the authenticated role.
Now go back to http://localhost:1337/restaurant: at this point, you should be able to see your list of restaurants.

Enabling GraphQL

By default, API generated withย Strapi are best on REST conventions. What if I would tell you that you could transform them into GraphQL within 10 seconds?
Well, let me prove you that.
A GraphQL plugin, which will make all the work for you, is available for Strapi. Install it:
strapi install graphql  
And that's it, you are done.
Restart your server, go to http://localhost:1337/playground and try this query:
{
  restaurants {
    _id
    name
  }
}

Display restaurants

It looks you are going to the right direction. What if we would display these restaurants in our Nuxt app?
Switch to your frontend code.
To quicken our front-end development, we are going to install the Strapi JavaScript SDK:
npm install strapi-sdk-javascript  
First, we are going to create a store to keep our restaurants list organized.
This store has a simple state which contains the list of restaurants. We add two mutations: one to add restaurants to the list and another to empty the list. To easily get the list of restaurants from any component, we also add a getter.
Path: store/restaurants.js
Now that our store is ready, we can start working on the view. Since we want to display the restaurants on the homepage, we are going to update the pages/index.vue.
Path: pages/index.vue
Some explanations, please? ๐Ÿค”
Two main sections are visible here: the template and the script. These are typical in Vue.js applications.
The template section defines the structure of the page. As you can see, some attributes are very specific to Vue.js:
  • v-for: repeat the current tag as many times as the array length (restaurants in our case).
  • v-if: display the tag only if the condition is valid.
  • v-model: bind a variable according to the value of the input. Useful here to create a simple search system to filter restaurants according to their name.
  • vue-router: create a link to another page.
In the script section, we import our required components and node modules. The fetch function, which is verify specific to Nuxt, is called when the page is loading: the content is not displayed until this function is resolved.
Well done!
๐Ÿ” In the next section, you will learn how to display the list of dishes: https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-dishes-list-part-3-7.