🍝 Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe - πŸ—οΈ Setup (part 1/7)

Get ready to develop a Deliveroo clone, using amazing technologies: Nuxt (Vuejs), GraphQL, Stripe and Strapi! From signup to order, you are going to let users discover restaurants, dishes and select their happy meal.

Tutorial illustration

The demo of the final result should make you hungry:

final result

Note: the source code is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nuxt-strapi-deliveroo-clone-tutorial.


Nuxt.js is an amazing framework for creating apps withΒ Vue.js. Designed to build production ready applications, it provides a solid project structure built with Webpack and Babel.

Vue.js is one of the most famous front-end framework, with more than 100K stars (πŸ™ˆ) on GitHub. Created in 2014 by Evan You, it quickly became a reference thanks to three main advantages: extremely simple yet powerful API, small library size, and great performances.


RESTΒ is the convention powering 99% of the live APIs. Succeeding to SOAP, it quickly became the de-facto convention because of its simplicity.

In 2015, Facebook published GraphQL: a powerful query language to request APIs. Since its publication, it kept growing and have been adopted by giants, such as GitHub, Twitter and Yelp.


Strapi is the most advanced Node.js API Content Management Framework. Halfway between a Node.js Framework and a Headless CMS, it saves weeks of API development time.

With its extensible plugin system, it provides a large set of built-in features: Admin Panel, Authentication & Permissions management, Content Management, API Generator, etc. Unlike online CMS, Strapi is 100% open-source (take a look at the GitHub repository), which means:

  • Strapi is completely free.
  • You can host it on your own servers, so you own the data.
  • It is entirely customisable and extensible, thanks to the plugin system.


Stripe is an online payement processor which makes developers' life much easier when dealing with payments. In this tutorial, we will use it to proceed orders.

Looking forward forward to cook this app? Let's get started!

Table of contents

πŸ—οΈ Setup


First of all, you are going to setup the Nuxt project. To do so, install Vue CLI:

npm install -g vue-cli  

Create a directory named deliveroo-clone-tutorial:

mkdir deliveroo-clone-tutorial  

Then, in this new folder, generate a new Nuxt project:

cd deliveroo-clone-tutorial  
vue init nuxt-community/starter-template client  

Press enter for every question.

Install the node modules:

cd client  
npm install  

At this point, you should see a list of generated files in the new client folder. To know more about this structure, take a look at the Nuxt directory structure documentation.

Finally, start the app from the client directory:

npm run dev  

Here you are! Open http://localhost:3000 to discover your brand new app.

Adding Bootstrap

To get a better design, we are going to add Bootstrap. To do so, update the installed dependencies:

npm i bootstrap-vue@2.0.0-rc.10  

Add bootstrap-vue/nuxt to modules section of nuxt.config.js:

Path: nuxt.config.js

Creating the Header component

In the same time, we are going to create our first component that we will reuse across the project.

Path: components/Header.vue

Use it in the default layout remove its style:

Path: layouts/default.vue

Clean the homepage content and remove its style:

Path: pages/index.vue

Restart the server to see your changes at http://localhost:3000.

Home page


Having a frontend is good, but your app obviously needs a backend to manage users, restaurants, dishes and orders. To make the magic happen, let's create a Strapi API.

Install Strapi

Requirements: please make sure to use Node 9 (or more) and have either MongoDB, Postgres or MySQL installed and running on your machine.

Install Strapi using npm:

npm i strapi@alpha -g  

Note: Strapi v3 is still an alpha version, but it will be fine for this tutorial.

Generate a Strapi project

Scaffold your API inside the deliveroo-clone-tutorial through a single command line:

cd deliveroo-clone-tutorial  
strapi new server --quickstart  

Wait a few seconds until your project is up and running. Your web browser should be automatically open. If not, visit http://localhost:1337/admin/ for the next step.

Note: Using the --quickstart flag, your project will automatically be setup with SQLite for the database. If you prefer to connect your project to PostgreSQL, MySQL or MongoDB, you can use strapi new server and select the custom setup.

Create your first User

Add your first user from the registration page.

Strapi register

Good job, you successfully setup both Nuxt and Strapi projects! πŸŽ‰

🏠 In the next section, you will learn how to display the list of restaurants: https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-restaurants-list-part-2-7.