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.
The demo of the final result should make you hungry:
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.
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
- 👋 Intro
- 🏗️ Setup (part 1) - current
- 🏠 Restaurants (part 2)
- 🍔 Dishes (part 3)
- 🔐 Authentication (part 4)
- 🛒 Shopping Cart (part 5)
- 💵 Order and Checkout (part 6)
- 🚀 Bonus: Deploy (part 7)
- 👏 Conclusion
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
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
npm run dev
Here you are! Open http://localhost:3000 to discover your brand new app.
To get a better design, we are going to add Bootstrap. To do so, update the installed dependencies:
npm i firstname.lastname@example.org
Add bootstrap-vue/nuxt to modules section of
Creating the Header component
In the same time, we are going to create our first component that we will reuse across the project.
Use it in the default layout remove its style:
Clean the homepage content and remove its style:
Restart the server to see your changes at http://localhost:3000.
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 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
Create your first User
Add your first user from the registration page.
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.