Vuetyfire

Connect Vue with Firebase easily with only a few lines of code. Adds on to your Vue app as a plugin. Helps you set up authentication and Firestore with reactive one way binding reflecting the current state of the database. Comes out of the box with support for building a authentication flow using FirebaseUI.

Prerequisites

Needed to set up the usage of Vuetyfire is basically a Vue app - with or without Typescript.

Authentication and route guards

To enable the use of route guards and authentication for your app Vue Router is needed. Follow the installation instructions on the Vue Router page.

Installation

Add package using npm install --save vuetyfire.

Setup

In your apps main file import the plugin and add the config object from Firebase. The config object can be copied directly from the Firebase Console. Then tell Vue to use vuetyfire as a plugin.

main.ts

import vuetyfire, { FirebaseConfig } from 'vuetyfire';

const firebaseConfig: FirebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
};

Vue.use(vuetyfire, { firebaseConfig });

On initialization the instances of Firebase and Firestore are mounted to the global scope as this.$firebase.

const firebaseInstance = this.$firebase.App;

const firestoreInstance = this.$firebase.firestore;

The instances can also be reached by importing the data object from Vuetyfire.

import { vuetyfireData } 'vuetyfire';

const firebaseInstance = vuetyfireData.firebase.App;

const firestoreInstance = vuetyfireData.firebase.firestore;

Add support for auth guards and routing

Provide the Vue Router configuration object router in the options object to the plugin.

main.ts

Vue.use(vuetyfire, { firebaseConfig, router });

When the Vue app is trying to reach a route the auth guard will check the authentication status and if the route can be reached. To protect a route and require that only signed in users can reach it provide meta information in the route configuration. If a route is protected and no user is signed in the guard will redirect the user to the path /login.

Add the protection meta information in your Vue Router configuration as the example below:

router.ts

routes: [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      requiresAuth: true,
    },
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
  },
]

Authentication using FirebaseUI

Vuetyfire comes with support for building a sign in flow using FirebaseUI making it easy to create an authentication form and get started. The example below is all what is needed to show a signin form in the referenced HTML element.

By default it shows a sign in/registration form with email / password authentication.

Make sure to enable your choice of authentication method in the Firebase Console.

Login.vue

<template>
  <div id="firebaseui-auth-container" />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class extends Vue {
  // Call the start method when the component is fully mounted
  mounted() {
    this.$firebase.startFirebaseUIAuth('firebaseui-auth-container');
  }
}
</script>

Configuration

Additional configuration can be added to the global initization of the plugin. These are provided as options to the plugin in the main file.

Global Firestore Bindings

Vuetyfire can already on initization bind specific paths in the Firestore database to variables on the global Vue scope. These will have a reactive binding and will update on any changes in the remote data. The paths and corresponding global variable are configured as an array in the main file like the example below.

Binding collections and documents from Firestore is done in the same way. Collections will always be an array and documents an object.

main.ts

const firestoreConfig: VueFirestoreConfig = {
  firestoreReferences: [
    {
      // The variable name to bind the collection to
      // reached on: this.myCollection
      key: 'myCollection',
      // The full path to your collection
      path: 'path/to/your/collection',
    },
  ],
};

// IF you are developing with Typescript it can be a good idea to declare the typings for your collections and documents to have a smoother development.
declare module 'vue/types/vue' {
  interface Vue {
    // collection: firebase.firestore.CollectionReference;
    // document: firebase.firestore.DocumentReference;
    myCollection: firebase.firestore.CollectionReference;
  }
}

Vue.use(vuetyfire, { firebaseConfig, firestoreConfig });

FirebaseUI options

It is possible to modify the behaviour of FirebaseUI by providing a configuration object into the plugin options object. All configuration is done according to the FirebaseUI documentation. The provided configuration will be merged with the default configuration for FirebaseUI.

main.ts

const firebaseUIOptions = {
  signInSuccessUrl: 'http://localhost:8080/sign-in-success',
};

Vue.use(vuetyfire, { firebaseConfig, firebaseUIOptions });

Data binding

Paths in the Firestore database can be bound to a variable in the local scope of a component in your Vue application whenever needed. These will create a reactive one way binding to the data on the provided path.

Document

Documents are objects and needs to be initialized as objects in the component before trying to bind data to it.

Call the binding function on the created hook in Vue.

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import { bindFirestorePath } from 'vuetyfire';

  @Component
  export default class extends Vue {
    myDocument = {};

    created() {
      bindFirestorePath({
        vm: this,
        key: 'myDocument',
        path: 'path/to/my/collection/document',
      });
    }
  }
</script>

Collection

Collections are arrays and needs to be initialized as arrays in the component before trying to bind data to it.

Call the binding function on the created hook in Vue.

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import { bindFirestorePath } from 'vuetyfire';

  @Component
  export default class extends Vue {
    myCollection = [];

    created() {
      bindFirestorePath({
        vm: this,
        key: 'myCollection',
        path: 'path/to/my/collection',
      });
    }
  }
</script>

Data modification

To keep data reactive changes to the data should be sent directly to the Firestore database to set the changes and let the bindings on relevant paths reflect it down again to the app.

Add document

Whenever a document needs to be created in a collection where a unique ID is needed to be set to it the add function should be used.

import { addFirestoreDocument} from 'vuetyfire';

addFirestoreDocument({ data: { something: 1 }, path: 'path/to/your/collection' })
  .then(() => {
    // Success!
  })
  .catch((err?: any) => {
    // Failure!
  });

Set/update document

To update/set data to a document the set commnand should be used. It can be an empty document, additions to a document or a completely new document.

import { setFirestoreDocument} from 'vuetyfire';

// Set new data
setFirestoreDocument({ data: { something: 1 }, path: 'path/to/document' })
  .then(() => {
    // Success!
  })
  .catch((err?: any) => {
    // Failure!
  });

// Merge new data into existing document
setFirestoreDocument({ data: { another: '' }, path: 'path/to/document' , merge: true})
  .then(() => {
    // Success!
  })
  .catch((err?: any) => {
    // Failure!
  });

Delete document

Delete document data with the delete command.

import { deleteFirestoreDocument} from 'vuetyfire';

deleteFirestoreDocument({ path: 'path/to/document' })
  .then(() => {
    // Success!
  })
  .catch((err?: any) => {
    // Failure!
  });