set lang on navigate

frontend/src/App.vue

@@ -40,13 +40,12 @@ export default {
     },
   },
 
-  created() {
+  async created() {
     window.addEventListener("keyup", e => {
       if (e.key == "/" && !document.activeElement.id.startsWith("input")) {
         this.search = !this.search;
       }
     });
-    this.$store.dispatch("initLang", { currentVueComponent: this });
   },
 
   async mounted() {

frontend/src/main.js

@@ -8,6 +8,8 @@ import i18n from "./i18n";
 import FlashMessage from "@smartweb/vue-flash-message";
 import "@mdi/font/css/materialdesignicons.css";
 import "typeface-roboto/index.css";
+import VueI18n from "@/i18n";
+import Vuetify from "@/plugins/vuetify";
 
 Vue.use(FlashMessage);
 Vue.config.productionTip = false;
@@ -18,20 +20,33 @@ const router = new VueRouter({
   mode: process.env.NODE_ENV === "production" ? "history" : "hash",
 });
 
-const DEFAULT_TITLE = 'Mealie';
+const DEFAULT_TITLE = "Mealie";
-const TITLE_SEPARATOR = '🍴';
+const TITLE_SEPARATOR = "🍴";
 const TITLE_SUFFIX = " " + TITLE_SEPARATOR + " " + DEFAULT_TITLE;
-router.afterEach( (to) => {
+router.afterEach(to => {
-  Vue.nextTick( async () => {
+  Vue.nextTick(async () => {
-    if(typeof to.meta.title === 'function' ) {
+    if (typeof to.meta.title === "function") {
       const title = await to.meta.title(to);
       document.title = title + TITLE_SUFFIX;
     } else {
-      document.title = to.meta.title ? to.meta.title + TITLE_SUFFIX : DEFAULT_TITLE;
+      document.title = to.meta.title
+        ? to.meta.title + TITLE_SUFFIX
+        : DEFAULT_TITLE;
     }
   });
 });
 
+async function loadLocale() {
+  console.log("Router Lang", store.getters.getActiveLang);
+  VueI18n.locale = store.getters.getActiveLang;
+  Vuetify.framework.lang.current = store.getters.getActiveLang;
+}
+
+router.beforeEach((__, _, next) => {
+  loadLocale();
+  next();
+});
+
 const vueApp = new Vue({
   vuetify,
   store,

frontend/src/routes/index.js

@@ -15,7 +15,7 @@ import ThisWeek from "@/pages/MealPlan/ThisWeek";
 import { api } from "@/api";
 import Admin from "./admin";
 import { store } from "../store";
-import i18n from '@/i18n.js';
+import i18n from "@/i18n.js";
 
 export const routes = [
   { path: "/", name: "home", component: HomePage },
@@ -36,7 +36,7 @@ export const routes = [
     path: "/search",
     component: SearchPage,
     meta: {
-      title: i18n.t('search.search'),
+      title: i18n.t("search.search"),
     },
   },
   { path: "/recipes/all", component: AllRecipes },
@@ -51,23 +51,22 @@ export const routes = [
         const recipe = await api.recipes.requestDetails(route.params.recipe);
         return recipe.name;
       },
-    } 
+    },
   },
   { path: "/new/", component: NewRecipe },
   {
     path: "/meal-plan/planner",
     component: Planner,
     meta: {
-      title:  i18n.t('meal-plan.meal-planner'),
+      title: i18n.t("meal-plan.meal-planner"),
-    } 
+    },
   },
   {
     path: "/meal-plan/this-week",
     component: ThisWeek,
     meta: {
-      title: i18n.t('meal-plan.dinner-this-week'),
+      title: i18n.t("meal-plan.dinner-this-week"),
-    } 
+    },
-
   },
   Admin,
   {

frontend/src/store/index.js

@@ -12,7 +12,7 @@ Vue.use(Vuex);
 const store = new Vuex.Store({
   plugins: [
     createPersistedState({
-      paths: ["userSettings", "language.lang", "siteSettings"],
+      paths: ["userSettings", "siteSettings"],
     }),
   ],
   modules: {

frontend/src/store/modules/language.js

@@ -1,5 +1,4 @@
 const state = {
-  lang: "en-US",
   allLangs: [
     {
       name: "English",

frontend/src/store/modules/siteSettings.js

@@ -4,7 +4,7 @@ import Vuetify from "@/plugins/vuetify";
 
 const state = {
   siteSettings: {
-    language: "en",
+    language: "en-US",
     firstDayOfWeek: 0,
     showRecent: true,
     cardsPerSection: 9,
@@ -25,12 +25,6 @@ const actions = {
     let settings = await api.siteSettings.get();
     commit("setSettings", settings);
   },
-  async initLang({ getters, commit }) {
-    // !Can Porbably Remove This?
-    await actions.requestSiteSettings({ commit });
-    VueI18n.locale = getters.getActiveLang;
-    Vuetify.framework.lang.current = getters.getActiveLang;
-  },
 };
 
 const getters = {