chore: make vue global components and layouts localizable (#1565)

frontend/layouts/admin.vue

@@ -6,7 +6,7 @@
       :top-link="topLinks"
       :bottom-links="bottomLinks"
       :user="{ data: true }"
-      secondary-header="Developer"
+      :secondary-header="$t('sidebar.developer')"
       :secondary-links="developerLinks"
     />
 
@@ -77,17 +77,17 @@ export default defineComponent({
       {
         icon: $globals.icons.wrench,
         to: "/admin/maintenance",
-        title: "Maintenance",
+        title: i18n.t("sidebar.maintenance"),
       },
       {
         icon: $globals.icons.check,
         to: "/admin/background-tasks",
-        title: "Background Tasks",
+        title: i18n.t("sidebar.background-tasks"),
       },
       {
         icon: $globals.icons.slotMachine,
         to: "/admin/parser",
-        title: "Parser",
+        title: i18n.t("sidebar.parser"),
       },
     ];
 

frontend/layouts/blank.vue

@@ -4,7 +4,9 @@
 
     <v-banner v-if="isDemo" sticky>
       <div class="text-center">
-        <b> This is a Demo for version: {{ version }} </b> | Username: changeme@email.com | Password: demo
+        <b> {{ $t("demo.info_message_with_version", { version: version }) }} </b> |
+        {{ $t("demo.demo_username", { username: "changeme@email.com" }) }} |
+        {{ $t("demo.demo_password", { password: "demo" }) }}
       </div>
     </v-banner>
 
@@ -17,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
 import TheSnackbar from "~/components/Layout/TheSnackbar.vue";
 import { useAppInfo } from "~/composables/api";
 export default defineComponent({
@@ -27,7 +29,8 @@ export default defineComponent({
 
     const isDemo = computed(() => appInfo?.value?.demoStatus || false);
 
-    const version = computed(() => appInfo?.value?.version || "unknown");
+    const { i18n } = useContext();
+    const version = computed(() => appInfo?.value?.version || i18n.t("about.unknown-version"));
 
     return {
       appInfo,

frontend/layouts/default.vue

@@ -6,7 +6,7 @@
       v-model="sidebar"
       absolute
       :top-link="topLinks"
-      secondary-header="Cookbooks"
+      :secondary-header="$t('sidebar.cookbooks')"
       secondary-header-link="/group/cookbooks"
       :secondary-links="cookbookLinks || []"
       :bottom-links="isAdmin ? bottomLink : []"
@@ -57,7 +57,9 @@
               {{ $vuetify.theme.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }}
             </v-icon>
           </v-list-item-icon>
-          <v-list-item-title> {{ $vuetify.theme.dark ? "Light Mode" : "Dark Mode" }} </v-list-item-title>
+          <v-list-item-title>
+            {{ $vuetify.theme.dark ? $t("settings.theme.light-mode") : $t("settings.theme.dark-mode") }}
+          </v-list-item-title>
         </v-list-item>
       </template>
     </AppSidebar>
@@ -89,7 +91,7 @@ export default defineComponent({
   middleware: "auth",
   setup() {
     const { cookbooks } = useCookbooks();
-    const { $globals, $auth, $vuetify } = useContext();
+    const { $globals, $auth, $vuetify, i18n } = useContext();
 
     const isAdmin = computed(() => $auth.user?.admin);
 
@@ -113,83 +115,83 @@ export default defineComponent({
         };
       });
     });
-    return { cookbookLinks, isAdmin, languageDialog, toggleDark, sidebar };
-  },
-  data() {
-    return {
-      createLinks: [
-        {
-          icon: this.$globals.icons.link,
-          title: "Import",
-          subtitle: "Import a recipe by URL",
-          to: "/recipe/create/url",
-          restricted: true,
-        },
-        { divider: true },
-        {
-          icon: this.$globals.icons.edit,
-          title: "Create",
-          subtitle: "Create a recipe manually",
-          to: "/recipe/create/new",
-          restricted: true,
-        },
-        { divider: true },
-        {
-          icon: this.$globals.icons.pages,
-          title: "Cookbook",
-          subtitle: "Create a new cookbook",
-          to: "/group/cookbooks",
-          restricted: true,
-        },
-      ],
-      bottomLink: [
-        {
-          icon: this.$globals.icons.cog,
-          title: this.$t("general.settings"),
-          to: "/admin/site-settings",
-          restricted: true,
-        },
-      ],
-      topLinks: [
-        {
-          icon: this.$globals.icons.calendarMultiselect,
-          title: this.$t("meal-plan.meal-planner"),
-          to: "/group/mealplan/planner",
-          restricted: true,
-        },
-        {
-          icon: this.$globals.icons.formatListCheck,
-          title: this.$t("shopping-list.shopping-lists"),
-          to: "/shopping-lists",
-          restricted: true,
-        },
-        {
-          icon: this.$globals.icons.viewModule,
-          to: "/recipes/all",
-          title: this.$t("sidebar.all-recipes"),
-        },
-        {
-          icon: this.$globals.icons.search,
-          to: "/search",
-          title: this.$t("sidebar.search"),
-        },
-        {
-          icon: this.$globals.icons.tags,
-          to: "/recipes/categories",
-          title: this.$t("sidebar.categories"),
-        },
-        {
-          icon: this.$globals.icons.tags,
-          to: "/recipes/tags",
-          title: this.$t("sidebar.tags"),
-        },
-        {
-          icon: this.$globals.icons.potSteam,
-          to: "/recipes/tools",
-          title: "Tools",
-        },
-      ],
-    };
+
+    const createLinks = [
+      {
+        icon: $globals.icons.link,
+        title: i18n.t("general.import"),
+        subtitle: i18n.t("new-recipe.import-by-url"),
+        to: "/recipe/create/url",
+        restricted: true,
+      },
+      { divider: true },
+      {
+        icon: $globals.icons.edit,
+        title: i18n.t("general.create"),
+        subtitle: i18n.t("new-recipe.create-manually"),
+        to: "/recipe/create/new",
+        restricted: true,
+      },
+      { divider: true },
+      {
+        icon: $globals.icons.pages,
+        title: i18n.t("sidebar.cookbook"),
+        subtitle: i18n.t("sidebar.create-cookbook"),
+        to: "/group/cookbooks",
+        restricted: true,
+      },
+    ];
+
+    const bottomLink = [
+      {
+        icon: $globals.icons.cog,
+        title: i18n.t("general.settings"),
+        to: "/admin/site-settings",
+        restricted: true,
+      },
+    ];
+
+    const topLinks = [
+      {
+        icon: $globals.icons.calendarMultiselect,
+        title: i18n.t("meal-plan.meal-planner"),
+        to: "/group/mealplan/planner",
+        restricted: true,
+      },
+      {
+        icon: $globals.icons.formatListCheck,
+        title: i18n.t("shopping-list.shopping-lists"),
+        to: "/shopping-lists",
+        restricted: true,
+      },
+      {
+        icon: $globals.icons.viewModule,
+        to: "/recipes/all",
+        title: i18n.t("sidebar.all-recipes"),
+      },
+      {
+        icon: $globals.icons.search,
+        to: "/search",
+        title: i18n.t("sidebar.search"),
+      },
+      {
+        icon: $globals.icons.tags,
+        to: "/recipes/categories",
+        title: i18n.t("sidebar.categories"),
+      },
+      {
+        icon: $globals.icons.tags,
+        to: "/recipes/tags",
+        title: i18n.t("sidebar.tags"),
+      },
+      {
+        icon: $globals.icons.potSteam,
+        to: "/recipes/tools",
+        title: i18n.t("tool.tools"),
+      },
+    ];
+
+    return { cookbookLinks, createLinks, bottomLink, topLinks, isAdmin, languageDialog, toggleDark, sidebar };
   },
 });
 </script>

frontend/layouts/error.vue

@@ -39,9 +39,15 @@ export default defineComponent({
     },
   },
   setup(props) {
-    useMeta({ title: props.error.statusCode === 404 ? "404 Not Found" : "An error occurred" });
-
     const { $globals, i18n } = useContext();
+
+    useMeta({
+      title:
+        props.error.statusCode === 404
+          ? (i18n.t("page.404-not-found") as string)
+          : (i18n.t("page.an-error-occurred") as string),
+    });
+
     const buttons = [
       { icon: $globals.icons.home, to: "/", text: i18n.t("general.home") },
       { icon: $globals.icons.primary, to: "/recipes/all", text: i18n.t("page.all-recipes") },
@@ -50,7 +56,7 @@ export default defineComponent({
 
     return {
       buttons,
-    }
+    };
   },
   // Needed for useMeta
   head: {},
@@ -67,4 +73,3 @@ p {
   font-size: 200px;
 }
 </style>
-