Simply copy and paste the following command line in your terminal to create your first Strapi project.

Get Started

This tutorial is part of the « E-commerce website with Strapi, Nuxt.js, GraphQL and Stripe »

- 🏗️ [Setup](https://strapi.io/blog/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-setup-part-1-7) (part 1) - **current**
- 🏠 [Homepage](https://strapi.io/blog/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-restaurants-list-part-2-7) (part 2)
- 🍔 [Restaurant page](https://strapi.io/blog/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-dishes-list-part-3-7) (part 3)
- 🛒 [Shopping Cart](https://strapi.io/blog/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-authentication-part-4-7) (part 4)
- 🔐 [Authentication](https://strapi.io/blog/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-shopping-card-part-5-7) (part 5)
- 💵 [Checkout](https://strapi.io/blog/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-order-and-checkout-part-6-7) (part 6)
- 🚀 [Bonus: Deploy](https://strapi.io/blog/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-bonus-deploy-part-7-7) (part 7)

Note: The source code is available on [Github](https://github.com/strapi/community-content/tree/master/tutorials/code/deliveroo-clone-nuxt-strapi-tutorial).

## Introduction

[Strapi](https://strapi.io/) is the **leading open-source Headless CMS**. The new major version of [Strapi](http://) introduces many improvements:

- New [**user interface**](https://design-system.strapi.io/) with improved navigation and accessibility.
- [**Plugin API**](https://docs.strapi.io/developer-docs/latest/developer-resources/plugin-api-reference/server.html) allowing everyone to easily create and maintain plugins thanks to a programmatic approach.
- [**Database query engine**](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/query-engine-api.html) that allows you to make precise queries and load only necessary data, which improves performance and facilitates customization.
- [**Updated REST & GraphQL API**](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html) with better filtering, pagination, standardised request and response format.
- [**API Token**](https://docs.strapi.io/user-docs/latest/settings/managing-global-settings.html) that allows you to manage the permissions of the Content API requests more smoothly.
- [**Error handling**](https://docs.strapi.io/developer-docs/latest/developer-resources/error-handling.html) with improved messages and standardised error codes makes it easier to fix issues.

[Nuxt.js](https://strapi.io/integrations/nuxtjs-cms) is a **free and open-source web application framework** based on Vue.js, Node.js, Webpack, and Babel.js.
[Vue.js](https://strapi.io/integrations/vuejs-cms) is an **open-source Model–view–view model JavaScript framework** for building user interfaces and single-page applications.
[GraphQL](https://strapi.io/blog/a-deep-dive-into-strapi-graph-ql) is a **query language** for your API and a server-side runtime for executing queries using a type system you define for your data.
[Stripe](http://) is an **online payment processing** for internet businesses.

## Goals

Get ready to develop a **Deliveroo clone, using amazing technologies: [**Strapi**](https://strapi.io/), [**Nuxt.js**](https://nuxtjs.org), [**GraphQL**](https://graphql.org)**, and [**Stripe**](http://stripe.com/)! 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:

![Deliveroo - Homepage](https://paper-attachments.dropbox.com/s_4AF4FDEDF16A3DF3B0654D64C2F33EDD6CA7EA05F0D813E76F8984F96837F085_1641829061152_image.png)


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

## Prerequisites
- [Node.js](https://nodejs.org), we recommend you have the v14 version installed.
- A text editor, we recommend [VS Code](https://code.visualstudio.com/) with the [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) extension, a Vue tooling for VS Code, powered by [vls](https://github.com/vuejs/vetur/tree/master/server). It comes with multiple features like syntax highlighting, formatting, IntelliSense, debugging, and more.
- A terminal, we recommend using VS Code's [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal).
## Step 1 - Setup

Create a new empty directory and navigate into it:

```
    # Create a new folder
    mkdir deliveroo-clone-tutorial
    
    # Move into new folder
    cd deliveroo-clone-tutorial
    
    # Opening new folder in VS Code
    code -r .

```

## Step 2 - Install a Nuxt project

In this step, we will use [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to create a new Nuxt project.
Open a terminal, or from [Visual Studio Code](https://code.visualstudio.com/) , open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal) and use the following command to create a new starter project:

```
    npx create-nuxt-app frontend
```


After running the command above, you may answer some questions. Once all questions are answered, it will install all the dependencies.

```
    ? Project name: deliveroo-clone
    ? Programming language: JavaScript
    ? Package manager: Yarn
    ? UI framework: None
    ? Nuxt.js modules: Skip
    ? Linting tools: ESLint, Prettier
    ? Testing framework: None
    ? Rendering mode: Universal (SSR / SSG)
    ? Deployment target: Static (Static/Jamstack hosting)
    ? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
    ? Continuous integration: None
    ? Version control system: Git
```


Now that you've created your Nuxt project, you are ready to start a new Strapi project.

## Step 3 - Install a Strapi project

Simply copy and paste the following command line in your terminal to create your first Strapi project.

```
    npx create-strapi-app@latest backend --quickstart
```


Using the `--quickstart` flag at the end of the command to directly create the project in quickstart mode, which uses the default database (SQLite).

Once the installation is complete, your browser automatically opens a new tab.

![Strapi - Admin](https://paper-attachments.dropbox.com/s_4AF4FDEDF16A3DF3B0654D64C2F33EDD6CA7EA05F0D813E76F8984F96837F085_1639072772822_image.png)


Complete the form, to create your new administrator account.

![Strapi - Homepage](https://paper-attachments.dropbox.com/s_4AF4FDEDF16A3DF3B0654D64C2F33EDD6CA7EA05F0D813E76F8984F96837F085_1639072855854_image.png)


Good job, you successfully set up both Nuxt and Strapi projects! 🎉

## Step 4 - Directory Structure

The default structure is intended to provide a great starting point for both small and large applications. Here's how our folder structure would look like:

```
    // Folder structure
    deliveroo-clone-tutorial
    ├── backend # default structure of a Strapi project
    │   ├── build
    │   ├── config
    │   ├── database
    │   ├── favicon.ico
    │   ├── node_modules
    │   ├── package.json
    │   ├── public
    │   ├── README.md
    │   ├── src
    │   └── yarn.lock
    └── frontend # default structure of a Nuxt application
        ├── components
        ├── jsconfig.json
        ├── node_modules
        ├── nuxt.config.js
        ├── package.json
        ├── pages
        ├── plugins
        ├── README.md
        ├── static
        ├── store
        └── yarn.lock
```


You can learn more about Nuxt directory structure at [Directory Structure](https://nuxtjs.org/docs/get-started/directory-structure/), and for [Strapi](https://strapi.io/) check [project structure](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/file-structure.html).

## Conclusion

The installation script has just created an empty project. We will start building the Homepage in the next step.
  



The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

medium_pnmH_4Kw.png

small_pnmH_4Kw.png

thumbnail_pnmH_4Kw.png

pnmH_4Kw.png

This tutorial was updated with Strapi v4.


The Product section covers our releases, feature reviews and more. 

Product

The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

The latest Strapi-related news and major events happening for Strapi – including announcements, remote-work, organization and tips on running a start-up. 

Company

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

E-commerce website with Nuxt, GraphQL, Strapi and Stripe - Setup (1/7)

pierre_burgy

Pierre created Strapi with Aurélien and Jim back in 2015. He's a strong believer in open-source, remote and people-first organizations. You can also find him regularly windsurfing or mountain-biking!