How To Structure / Model Firebase Cloud Firestore Vue.js
Tags: firebase, vue, programming
Published: 2021-07-12 12:04:29

Building a collection of list items organized by sections is one of the scenarios that you can’t avoid when building any type of application. In this guide, I will be showing you exactly how to do that by building a simple restaurant menu page using [Vue.js](https://softauthor.com/category/vue-js/) and [Firebase Cloud Firestore](https://softauthor.com/category/firebase/).

Along the way, you’re also going to learn how to properly structure and query Cloud Firestore Database for it.

Let’s take a look at what we will be building by the end of this tutorial.

![alt text](https://softauthor.com/wp-content/uploads/2019/08/vuejs-firebase-build-a-restaurant-menu-page.png)

In the typical example above, I have a restaurant name at the top. Below that you can see menu items grouped by sections/types such as Appetizers, Dum Biriyani, etc.

Pretty straight forward.

- [Final JavaScript Object API Structure](https://softauthor.com/vue-firebase-structure-model-cloud-firestore/#final-javascript-object-api-structure)
- [Firestore Data Structure for Restaurant Menu Page](https://softauthor.com/vue-firebase-structure-model-cloud-firestore/#firestore-data-structure-for-restaurant-menu-page)
- [Create A Vue.js Project](https://softauthor.com/vue-firebase-structure-model-cloud-firestore/#create-A-vue-js-project)
- [Initialize Firebase](https://softauthor.com/vue-firebase-structure-model-cloud-firestore/#initialize-firebase)
- [Query Restaurant Data](https://softauthor.com/vue-firebase-structure-model-cloud-firestore/#query-restaurant-data)
- [Retrieve & Merge Sub-Collections Data - Menu Types / Menu Items](https://softauthor.com/vue-firebase-structure-model-cloud-firestore/#retrieve-merge-sub-collections-data)
- [Render Restaurant API Object To The View](https://softauthor.com/vue-firebase-structure-model-cloud-firestore/#render-restaurant-api-object-to-the-view)

###Final JavaScript Object API Structure

Before going further, I would like to talk about the structure of the final JavaScript object that will be needed to build this restaurant menu page.

The picture below depicts a high-level overview of how to transform the final JavaScript object into the actual restaurant menu page by showing which data goes where.

To generate this object, simply get the data from Cloud Firestore and merge them together which is very similar to API output when fetching data from HTTP request.

![alt text](https://softauthor.com/wp-content/uploads/2019/08/view-model-camparison.jpg)

Let’s take a look at the output JavaScript object in detail.

It has **title** and **id** properties at the top level as well as a **menu** property which is an array that contains a couple of objects which will be the restaurant sections/types.

Each section/type object in the menu array has a **title** property and **menuItems** which is another array of objects. Each object inside the menu items consists of title, description and price properties.

###Data Structure For The Menu Page

I could create a data structure very similar to the output JavaScript object, but it will have deeply nested data inside a single document which must be avoided at any cost.

Instead, I will be making a sub-collection wherever new data will be added over the period of time. Then, query & merge them together in order to match the final JavaScript object.

Cloud Firestore queries are shallow, so when you make a query to a document, it will not have a sub-collection on it.

> *Recommended → [Learn Firestore CRUD Queries Quickly Guide](https://softauthor.com/firestore-querying-filtering-data-for-web/)*

Here is the infographic that shows how to structure data for a restaurant menu page.

![alt text](https://softauthor.com/wp-content/uploads/2019/08/vuejs-firebase-build-a-restaurant-menu-page-infographics.jpg)

As you can see, I have a restaurant collection, which has a few documents. Each document has two fields: the **title** which holds string value and **menu-types** which is a sub-collection.

Documents on the **menu-types** sub-collection again have two fields; the **title** that has string value and **menu-items** which is another sub-collection.

Each document in that sub-collection has three fields which are **title**, **description**, and **price**.

Here is the screenshot of an actual Cloud Firestore database structure with sample data.

![alt text](https://softauthor.com/wp-content/uploads/2019/08/cloud-firestore-data-structure.jpg)

Add some data similar to the above structure to your Cloud Firestore Database so that it’s easy to follow along.

###Create A Vue.js Project

{% youtube 3A57dcz8A8E %}

Go ahead and create a vue.js project using [webpack](https://cli.vuejs.org/guide/webpack.html).

```JavaScript
vue init webpack my-project
```

Then, npm install to it.

```JavaScript
npm install
```

Run the application.

```JavaScript
npm run dev
```

Once the vue.js app is running, go to **HelloWord.vue** and delete the file.

**App.vue** is the file I will be putting all my code into to make it simpler for this tutorial.

Add [Materialize CSS](https://materializecss.com) link to **index.html** which is optional.

```HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
```

###Initialize Firebase

{% youtube NpDlC2-Zo0U %}

Install [Firebase](https://firebase.google.com).

```JavaScript
npm install --save firebase
```

 Initialize Firebase inside **main.js**.

```JavaScript
import firebase from "firebase";

var firebaseConfig = {
  apiKey: "*************************",
  authDomain: "*************************",
  databaseURL: "*************************",
  projectId: "*************************",
  storageBucket: "*************************",
  messagingSenderId: "*************************",
  appId: "*************************"
};
firebase.initializeApp(firebaseConfig);
```

>*Get initialization code from your Firebase project on the [Firebase console](https://accounts.google.com/signin/v2/identifier?passive=1209600&osid=1&continue=https%3A%2F%2Fconsole.firebase.google.com%2Fu%2F0%2F&followup=https%3A%2F%2Fconsole.firebase.google.com%2Fu%2F0%2F&flowName=GlifWebSignIn&flowEntry=ServiceLogin).*

[Continue Reading...](https://softauthor.com/vue-firebase-structure-model-cloud-firestore/#render-restaurant-api-object-to-the-view)