Product
Resources
Pierre Burgy
July 3, 2018
By Pierre Burgy, revised by Maxime Castres on August 19, 2019.
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.
This demo, of the final result, below should make you hungry:
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-tutorials/tree/master/tutorials/deliveroo-clone-nuxt-strapi-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 frameworks, with more than 100K stars (π) on GitHub. Created in 2014 by Evan You, VueJs has quickly become a leading Javascript framework thanks to three main advantages: and extremely simple yet powerful API, a small library size, and great performance.
RESTΒ is the convention powering 99% of the live APIs. Succeeding 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 has been adopted by giants, such as GitHub, Twitter and Yelp.
Strapi is the *The open source Headless CMS Front-End Developers love*. 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. Strapi is 100% open-source (take a look at the GitHub repository), which means:
Stripe is an online payement processor which makes developers' life much easier when dealing with payments. In this tutorial, you will use it to process orders.
Looking forward to cook this app? Let's get started!
First of all, you are going to setup the Nuxt.js project.
yarn global add @vue/cli
# OR
npm install -g @vue/cli
deliveroo-clone-tutorial
:mkdir deliveroo-clone-tutorial
cd deliveroo-clone-tutorial
frontend
:yarn create nuxt-app frontend
# OR
npx create-nuxt-app frontend
# OR
npm init nuxt-app frontend
After running the command above, you may answer the questions, but you only need to answer the following question. Otherwise, just hit enter
:
? Project name: frontend
? Project description: Cooking a Deliveroo clone
? Author name: Me
? Choose the package manager: Yarn
? Choose custom server framework: None (Recommended)
? Choose Nuxt.js modules ...
? Choose linting tools ...
? Choose test framework ...
? Choose rendering mode Universal ...
Run either:
cd frontend && yarn dev
cd frontend && npm run dev
Here you are! Open http://localhost:3000 to discover your brand new app.
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. You are going to use this css framework for this tutorial.
./frontend
yarn add uikit
Now you need to initialize UIkit's Js in your Nuxt app. You are going to do this by creating a plugin.
./frontend/plugins/uikit.js
file and copy/paste the following code:import Vue from 'vue'
import UIkit from 'uikit/dist/js/uikit-core'
import Icons from 'uikit/dist/js/uikit-icons'
UIkit.use(Icons)
UIkit.container = '#__nuxt'
Vue.prototype.$uikit = UIkit
Plugins need to be referenced in nuxt.config.js
file and css files too.
nuxt.config.js
...
css: [
"uikit/dist/css/uikit.min.css",
"uikit/dist/css/uikit.css",
],
/*
** Plugins to load before mounting the App
*/
plugins: [
{ src: '~/plugins/uikit.js', ssr: false }
],
...
Great! UIkit is ready! Now let's create your first component!
Creating the Header component
This Header.vue
component will be used on every page of your application.
Header.vue
component in components
directory./frontend/components/Header.vue
<template>
<client-only>
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><router-link tag="a" class="navbar-brand" to="/" exact>Deliveroo clone</router-link></li>
<li><router-link tag="a" class="navbar-brand" to="/restaurants" exact>Restaurants</router-link></li>
</ul>
</div>
</nav>
</client-only>
</template>
The layouts/default.vue
component is the root of all yours pages. Inside this component lies your <nuxt />
application (the pages you are about to create for this tutorial)
In the next step, you will copy/paste the following code in order to use the new Header component, you need to import it in the <script>
section and delete the unnecessary CSS styles. You'll also define a section and a container where all your code will be
default.vue
file./frontend/layouts/default.vue
<template>
<div>
// You call your new Header component
<Header />
<div class="uk-section uk-section-default">
<div class="uk-container uk-container-large">
// This is where all yours pages will be
<nuxt />
</div>
</div>
</div>
</template>
<script>
// Import your new Header component
import Header from '~/components/Header.vue'
export default {
components: {
Header
}
}
</script>
Now let's modify your homepage. This is your /frontend/pages/index.vue
file
/frontend/pages/index.vue
<template>
<div>
<img src="https://media.giphy.com/media/zBL9j9oiR3VM4/giphy.gif" class="uk-position-center" alt="">
</div>
</template>
Now you should be able to get to your homepage (index.vue
) that resides in your layouts/default.vue
which import your Header.vue
component
yarn dev
or npm run dev
if you stopped your frontendHaving 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 project to manage your content.
Requirements: Please make sure to use Node 10 (or more) and have either MongoDB, Postgres or MySQL installed and running on your machine.*
Strapi can be used with different databases. You will use the --quickstart
option which will easily install Strapi with a SQLite database. This is recommended for prototyping and developing with Strapi. (Unless using MongoDB).
backend
:/deliveroo-clone-tutorial
yarn create strapi-app backend --quickstart
# OR
npx create-strapi-app backend --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: This is how to start Strapi server in case you stopped the running process
yarn develop
Good job, you successfully setup both Nuxt.js 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/
Please note: Since we initially published this blog, we released new versions of Strapi and tutorials may be outdated. Sorry for the inconvenience if it's the case, and please help us by reporting it here.