Using Firebase in a Vue App Vuefire — References and Querying

Using Firebase in a Vue App Vuefire — References and Querying

The Vuefire library lets us add Firebase database manipulation capabilities right from our Vue app.

The Vuefire library lets us add Firebase database manipulation capabilities right from our Vue app. In this article, we’ll look at how to use Vuefire to add support for Cloud Firestore database manipulation into our Vue app.

References to Other Documents

We can store references to other documents by referencing them. This only works with the Cloud Firestore.

For example, we can write:

App.vue

<template>
  <div>
    <div v-for="c of cities" :key="c.id">{{c}}</div>
  </div>
</template>
<script>
import { db } from "./db";
const books = db.collection("books");
export default {
  data() {
    return {
      cities: []
    };
  },
  firestore: {
    cities: db.collection("cities")
  },
  async mounted() {
    await db.collection("cities").add({
      name: "London",
      books: [books.doc("1")]
    });
  }
};
</script>

db.js

import firebase from "firebase/app";
import "firebase/firestore";
export const db = firebase
  .initializeApp({ projectId: "project-id" })
  .firestore();
const { Timestamp, GeoPoint } = firebase.firestore;
export { Timestamp, GeoPoint };

We just reference the documents we want in an array to make a reference to them.

Then we can see the document wherever we reference it.

programming javascript firebase

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

What is firebase,firebase bangla tutorial.

LIKE | COMMENT | SHARE | SUBSCRIBE The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...

Firebase Introduction with C#

LIKE | COMMENT | SHARE | SUBSCRIBE Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google...

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

Learn JavaScript - Full Course for Beginners. DO NOT MISS!!!

In this video tutorial, we'll learn Learn JavaScript - Full Course for Beginners. This complete 134-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript programming language. DO NOT MISS!!!

Create database into firebase

LIKE | COMMENT | SHARE | SUBSCRIBE In this video, I will show you how to Create database into #firebase console. Subscribe & Stay Connected! Thank You! ♥ #Fi...