Here is a good way to configure Vue-i18n so you can use it in your Vuex Store

First, create a file just to configure the internationnalization, we can name it i18n.js, at the root of our project.

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import moment from 'moment';

Vue.use(VueI18n);

// if you are using moment in your project, now is a good time
// to set its locale also
moment.locale(locale);

const i18n = new VueI18n({
  locale, // global variable holding the local value
  messages, // globale variable holding translations
});

export default i18n;

The in your main.js file :

import i18n from './i18n';

// ...

new Vue({
  i18n,
  el: `#app`,
  router,
  components: { App },
  template: ``,
  store,
});

And in your Vuex Store (I am using vue-toasted to display messages in a toaster) :

import axios from 'axios';
import Vue from 'vue';
import moment from 'moment';
import i18n from '../../i18n';

export default {
  state : {
    // ...
  },
  mutations : {
    // ...
  },
  actions : {
    doSomething ({ dispatch }, data) {
      return axios.post(`/api/something`, data)
      .then(res => {
        Vue.toasted.success(i18n.tc(`store.success_doing_something`));
      })
      .catch(() => {
        Vue.toasted.error(i18n.tc(`store.error_while_doing_something`));
        return Promise.reject();
      });
    },
  },
};

Passing all props from a component to a child component in Vue is generally considered not a good thing to do... but you might want to do it anyway because you know what you are doing 😉 I'll try to write a post on how to avoid such a pattern later, but here it is :

Let's say you are using a framework that provide you with a component named VMenu, and you want to wrap that component in your own component (MyMenu) and pass all the props :

export default {
  name : `MyMenu`,
  functional : true,
  render (createElement, context) {
    return createElement(`div`, {}, [
      createElement(`v-menu`, {
        props : {
          ...context.props,
          aPropYouWantToOverride : `value`,
        },
      }, [
        context.slots().default, //  also pass default slot to child
        createElement(`template`, { slot : `activator` }, context.slots().activator), // passing another named slot (named "activator")
      ]),
    ]);
  },
};

The important thing here is to create a functionnal component, because that will automatically take all the props given to our MyMenu component and put them in the context object.

Most of the time, it might be best not to use vuew with firebase. But some times you need to, or you just want to use the authentication part. Here is a way to implement firebase authentication via a Vuex module:

import firebase from 'firebase/app';
import 'firebase/database';
import 'firebase/auth';

const FBConfig = {
  // your firebase credentials...
};
firebase.initializeApp(FBConfig);

const firebaseModule = {
  state: {
    user: null,
    error: '',
    initialized: false,
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user;
    },
  },
  actions: {
    init({ commit, state }) {
      if (state.initialized) {
        return;
      }
      state.initialized = true;

      firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
          console.log(user);
          commit('SET_USER', user);
        } else {
          commit('SET_USER', null);
        }
      });
    },
    login({ state, dispatch }, credentials) {
      return dispatch('init')
        .then(() => firebase.auth().signInWithEmailAndPassword(credentials.email, credentials.password))
        .then((res) => {
          console.log(res);
        })
        .catch(function (error) {
          console.log(error);
          state.error = error;
        });
    },
    signup({ state, dispatch }, credentials) {
      return dispatch('init')
      .then(() => firebase.auth().createUserWithEmailAndPassword(credentials.email, credentials.password))
      .then((res) => {
        console.log(res);
      })
      .catch(function (error) {
        console.log(error);
        state.error = error;
      });
    },
  },
};

export default firebaseModule;