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.
Needed to set up the usage of Vuetyfire is basically a Vue app - with or without Typescript.
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.
Add package using npm install --save vuetyfire
.
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;
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,
},
]
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>
Additional configuration can be added to the global initization of the plugin. These are provided as options to the plugin in the main
file.
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 });
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 });
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.
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>
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>
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.
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!
});
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 data with the delete command.
import { deleteFirestoreDocument} from 'vuetyfire';
deleteFirestoreDocument({ path: 'path/to/document' })
.then(() => {
// Success!
})
.catch((err?: any) => {
// Failure!
});