Never-ending Pumpkin Mulch

    TypeScript icon, indicating that this package has built-in type declarations

    3.2.21 • Public • Published

    Vuexfire Build Status npm package coverage

    SSR ready Firebase binding for Vuex



    yarn add firebase vuexfire
    # or
    npm install firebase vuexfire


    Add the mutations to your root Store and make sure to define the property you want to bind in the state first:

    import { vuexfireMutations } from 'vuexfire'
    const store = new Vuex.Store({
      state: {
        todos: [], // Will be bound as an array
        user: null, // Will be bound as an object
      mutations: {
        // your mutations

    It works with modules as well, but you should not add the mutations there:

    const store = new Vuex.Store({
      modules: {
        todos: {
          state: {
            todos: [], // Will be bound as an array
            user: null, // Will be bound as an object

    In order to use VuexFire, you have to enhance actions. This action enhancer takes the actual action and enhances it with two additional parameters in the context, bindFirestoreRef and unbindFirestoreRef:

    import { firestoreAction } from 'vuexfire'
    const setTodosRef = firestoreAction(
      ({ bindFirestoreRef, unbindFirestoreRef }, { ref }) => {
        // this will unbind any previously bound ref to 'todos'
        bindFirestoreRef('todos', ref)
        // you can unbind any ref easily

    Access it as a usual piece of the state:

    const Component = {
      template: '<div>{{ todos }}</div>',
      computed: Vuex.mapState(['todos']),
      created() {
        this.$store.dispatch('setTodosRef', { ref: db.collection('todos') })

    Browser support

    VuexFire requires basic WeakMap support, which means that if you need to support any of these browsers:

    • IE < 11
    • Safari < 7.1
    • Android < 5.0

    You'll have to include a polyfill. You can use atlassian/WeakMap.

    You can find more information about WeakMap support here.

    How does it work?

    VuexFire uses multiple global mutations prefixed by vuexfire/ to call the actual mutations to modify objects and arrays. It listens for updates to your firebase database and commits mutations to sync your state. Thanks to the action enhancer firestoreAction, it gets access to the local state and commit so it works with modules too 👍




    npm i @fredrikbergelin/vuexfire

    DownloadsWeekly Downloads






    Unpacked Size

    116 kB

    Total Files


    Last publish


    • fredrikbergelin