How to Create Firebase or Firestore Plugin on Nuxt JS (V2)

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, avr: 5.00)

The Cloud Firestore is a flexible and scalable database for web, mobile, and server development from Firebase and Google Cloud Platform, it’s like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners. Firebase is easy to integrate with Nuxtjs and let’s create simple Firebase Plugin Nuxt JS and this way without the need for any additional libraries

This tutorial demonstrates step by step how to create Firebase plugin and integrated into Nux.js 2, The purpose you can easily call it everywhere both in component and Vuex Store

Prerequisites

Before starting with this guide, make sure you have been installed Nuxt.JS. If you dont install yet Let’s see How to Install NUXT 2 and Vuetify without Error. On this guides we are using Nuxt.js version 2.3.4


Step 1: Install Firebase Library Node.JS

The full Firebase JavaScript client includes support for Firebase Realtime Database, the Firestore Realtime Database, the Firebase Authentication, the Firebase Storage, and Firebase Cloud Messaging. To install it in Node.JS use the following command

npm install firebase --save

This is all the dependencies you will need. In your packages.json file you should see the below:

"dependencies": {
    "cross-env": "^5.2.0",
    "firebase": "^5.8.0",
    "nuxt": "^2.3.4",
  },

Step 2: Create Config Initialization (Optional)

Creating a Config folder is an optional way for separating configuration file, if you want to this create a config folder and inside this folder create a file FirebaseInit.js and add or copy/paste the following code into FirebaseInit.js

import * as firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/storage'

const config = {
  apiKey: '<replace from YOUR FIREBASE>',
  authDomain: '<replace from YOUR FIREBASE>',
  databaseURL: '<replace from YOUR FIREBASE>',
  projectId: '<replace from YOUR FIREBASE>',
  storageBucket: '<replace from YOUR FIREBASE>',
  messagingSenderId: '<replace from YOUR FIREBASE>'
}

if (!firebase.apps.length) {
  firebase.initializeApp(config)
}

export const GoogleProvider = new firebase.auth.GoogleAuthProvider()
export const auth = firebase.auth()
export const DB = firebase.firestore()
export const storage = firebase.storage()

export default firebase
Note

The timestampsInSnapshots setting now defaults to true and you no longer need to explicitly set it.


Step 3: Create the Firebase Plugin

In /plugins folder, create a file called firebase.js and add or copy/paste the following code

import Vue from 'vue'
import { DB, auth, storage } from '@/config/FirebaseInit'

const firebasePlugin = {

  install() {
    if (Vue.__nuxt_firebase_installed__) {
      return
    }
    Vue.__nuxt_firebase_installed__ = true

    if (!Vue.prototype.$DB) {
      Vue.prototype.$firestore = DB
      Vue.prototype.$AUTH = auth
      Vue.prototype.$storage = storage
    }
  }
}

Vue.use(firebasePlugin)

export default (ctx) => {
  const { app, store } = ctx

  app.$firestore = Vue.prototype.$firestore
  ctx.$firestore = Vue.prototype.$firestore

  app.$AUTH = Vue.prototype.$AUTH
  ctx.$AUTH = Vue.prototype.$AUTH

  app.$storage = Vue.prototype.$storage
  ctx.$storage = Vue.prototype.$storage

  if (store) {
    store.$firestore = Vue.prototype.$firestore
    store.$AUTH = Vue.prototype.$AUTH
    store.$storage = Vue.prototype.$storage
  }
}

Step 4: Using the Firestore

Now you can use everywhere both in Component and Vuex Store, for firestore realtime database this.$firestore and for firestore/firebase authenticationthis.$AUTHand for the storage this.$storage

Let’s test on index.vue in the folder pages (You may test it in any other file)

<template>
  <div>Hallo...Axfon</div>
</template>

<script>
export default {
  created() {
    console.log(this.$firestore)
  }
}
</script>

Check in the Browser


If this tutorial could help you, please rate above Star button rating and share to help others find it! Feel free to leave a comment below.

Recommended For You

Axfon

About the Author: Axfon

Team committed to share our IT skills and experience through our website which may assist to formulate a task easy