🍝 Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe

🏗️ Setup (part 1/7)

Pierre Burgy
Jul 3, 2018 · 4 min read

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.

Image for post
Image for post

The demo of the final result should make you hungry:

Image for post
Image for post

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.


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

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.

Image for post
Image for post


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

The CLI will ask you to choose your database: select MongoDB, Postgres or MySQL. Then, fill the database information in. The default values should work if you correctly installed the database system on your machine.

Image for post
Image for post

Start the server

Launch the Node.js server:

cd server strapi start
Image for post
Image for post

Starting now, you should be able to visit the admin panel of your project: http://localhost:1337/admin.

Create your first User

Add your first user from the registration page.

Image for post
Image for post

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.

Originally published at blog.strapi.io on July 3, 2018.


Strapi is the leading open-source headless CMS.

Pierre Burgy

Written by



Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable and developer-first. Unleash your content with Strapi.

Pierre Burgy

Written by



Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable and developer-first. Unleash your content with Strapi.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store