diff --git a/frontend/src/App.vue b/frontend/src/App.vue index bb545577b..6a8f33185 100644 --- a/frontend/src/App.vue +++ b/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() { diff --git a/frontend/src/main.js b/frontend/src/main.js index c4917605e..d39a9c768 100644 --- a/frontend/src/main.js +++ b/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,19 +20,32 @@ const router = new VueRouter({ mode: process.env.NODE_ENV === "production" ? "history" : "hash", }); -const DEFAULT_TITLE = 'Mealie'; -const TITLE_SEPARATOR = '🍴'; +const DEFAULT_TITLE = "Mealie"; +const TITLE_SEPARATOR = "🍴"; const TITLE_SUFFIX = " " + TITLE_SEPARATOR + " " + DEFAULT_TITLE; -router.afterEach( (to) => { - Vue.nextTick( async () => { - if(typeof to.meta.title === 'function' ) { - const title = await to.meta.title(to); +router.afterEach(to => { + Vue.nextTick(async () => { + 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, diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js index f17df9907..0df477cb7 100644 --- a/frontend/src/routes/index.js +++ b/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 }, @@ -32,42 +32,41 @@ export const routes = [ { path: "/sign-up", redirect: "/" }, { path: "/sign-up/:token", component: SignUpPage }, { path: "/debug", component: Debug }, - { - path: "/search", + { + path: "/search", component: SearchPage, meta: { - title: i18n.t('search.search'), + title: i18n.t("search.search"), }, }, { path: "/recipes/all", component: AllRecipes }, { path: "/pages/:customPage", component: CustomPage }, { path: "/recipes/tag/:tag", component: TagPage }, { path: "/recipes/category/:category", component: CategoryPage }, - { - path: "/recipe/:recipe", + { + path: "/recipe/:recipe", component: ViewRecipe, meta: { title: async route => { 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", + { + 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, { diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index acb054348..ceae4753c 100644 --- a/frontend/src/store/index.js +++ b/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: { diff --git a/frontend/src/store/modules/language.js b/frontend/src/store/modules/language.js index 02a52c353..8708f4b36 100644 --- a/frontend/src/store/modules/language.js +++ b/frontend/src/store/modules/language.js @@ -1,5 +1,4 @@ const state = { - lang: "en-US", allLangs: [ { name: "English", diff --git a/frontend/src/store/modules/siteSettings.js b/frontend/src/store/modules/siteSettings.js index 716afffac..2b660646c 100644 --- a/frontend/src/store/modules/siteSettings.js +++ b/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 = {