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 and Firebase Cloud Firestore.
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.
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
- Firestore Data Structure for Restaurant Menu Page
- Create A Vue.js Project
- Initialize Firebase
- Query Restaurant Data
- Retrieve & Merge Sub-Collections Data - Menu Types / Menu Items
- 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.
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
Here is the infographic that shows how to structure data for a restaurant menu page.
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.
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
Go ahead and create a vue.js project using webpack.
vue init webpack my-project
Then, npm install to it.
npm install
Run the application.
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 link to index.html which is optional.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
Initialize Firebase
Install Firebase.
npm install --save firebase
Initialize Firebase inside main.js.
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.
Top comments (0)