From ff958a5015c65025c6adc2b54c6c64a1d76f7b12 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Wed, 3 Sep 2025 00:44:52 -0500
Subject: [PATCH] fix: Fix PWA (#6090)

---
 dev/code-generation/gen_ts_locales.py         |  2 +-
 frontend/components/Layout/DefaultLayout.vue  |  1 -
 frontend/i18n.config.ts                       | 85 +++++++++----------
 frontend/layouts/basic.vue                    |  1 -
 frontend/layouts/blank.vue                    |  1 -
 frontend/nuxt.config.ts                       | 67 ++++++++-------
 frontend/pages/admin/manage/groups/[id].vue   |  2 +-
 .../pages/admin/manage/households/[id].vue    |  2 +-
 frontend/pages/admin/manage/users/[id].vue    |  2 +-
 frontend/pages/admin/manage/users/create.vue  |  2 +-
 frontend/pages/admin/site-settings.vue        |  2 +-
 .../pages/g/[groupSlug]/cookbooks/index.vue   |  2 +-
 frontend/pages/g/[groupSlug]/r/create.vue     |  2 +-
 .../g/[groupSlug]/recipes/finder/index.vue    |  2 +-
 .../pages/g/[groupSlug]/recipes/timeline.vue  |  2 +-
 frontend/pages/group/data.vue                 |  2 +-
 frontend/pages/group/index.vue                |  2 +-
 frontend/pages/group/migrations.vue           |  2 +-
 frontend/pages/group/reports/[id].vue         |  2 +-
 frontend/pages/household/index.vue            |  2 +-
 .../pages/household/mealplan/settings.vue     |  2 +-
 frontend/pages/household/members.vue          |  2 +-
 frontend/pages/household/notifiers.vue        |  2 +-
 frontend/pages/household/webhooks.vue         |  2 +-
 frontend/pages/shopping-lists/[id].vue        |  2 +-
 frontend/pages/shopping-lists/index.vue       |  2 +-
 frontend/pages/user/profile/api-tokens.vue    |  2 +-
 frontend/pages/user/profile/index.vue         | 20 ++---
 28 files changed, 109 insertions(+), 110 deletions(-)

diff --git a/dev/code-generation/gen_ts_locales.py b/dev/code-generation/gen_ts_locales.py
index e16554592..31dfe97de 100644
--- a/dev/code-generation/gen_ts_locales.py
+++ b/dev/code-generation/gen_ts_locales.py
@@ -174,7 +174,7 @@ the code generation ID is hardcoded into the script and required in the nuxt con
 
 def inject_nuxt_values():
     all_date_locales = [
-        f'"{match.stem}": require("./lang/dateTimeFormats/{match.name}"),' for match in datetime_dir.glob("*.json")
+        f'"{match.stem}": () => import("./lang/dateTimeFormats/{match.name}"),' for match in datetime_dir.glob("*.json")
     ]
 
     all_langs = []
diff --git a/frontend/components/Layout/DefaultLayout.vue b/frontend/components/Layout/DefaultLayout.vue
index 9f353680d..7445dc4be 100644
--- a/frontend/components/Layout/DefaultLayout.vue
+++ b/frontend/components/Layout/DefaultLayout.vue
@@ -1,6 +1,5 @@
 <template>
   <v-app dark>
-    <NuxtPwaManifest />
     <TheSnackbar />
 
     <AppHeader>
diff --git a/frontend/i18n.config.ts b/frontend/i18n.config.ts
index fa449d410..9494db5c2 100644
--- a/frontend/i18n.config.ts
+++ b/frontend/i18n.config.ts
@@ -1,48 +1,47 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
 const datetimeFormats = {
   // CODE_GEN_ID: DATE_LOCALES
-  "af-ZA": require("./lang/dateTimeFormats/af-ZA.json"),
-  "ar-SA": require("./lang/dateTimeFormats/ar-SA.json"),
-  "bg-BG": require("./lang/dateTimeFormats/bg-BG.json"),
-  "ca-ES": require("./lang/dateTimeFormats/ca-ES.json"),
-  "cs-CZ": require("./lang/dateTimeFormats/cs-CZ.json"),
-  "da-DK": require("./lang/dateTimeFormats/da-DK.json"),
-  "de-DE": require("./lang/dateTimeFormats/de-DE.json"),
-  "el-GR": require("./lang/dateTimeFormats/el-GR.json"),
-  "en-GB": require("./lang/dateTimeFormats/en-GB.json"),
-  "en-US": require("./lang/dateTimeFormats/en-US.json"),
-  "es-ES": require("./lang/dateTimeFormats/es-ES.json"),
-  "et-EE": require("./lang/dateTimeFormats/et-EE.json"),
-  "fi-FI": require("./lang/dateTimeFormats/fi-FI.json"),
-  "fr-BE": require("./lang/dateTimeFormats/fr-BE.json"),
-  "fr-CA": require("./lang/dateTimeFormats/fr-CA.json"),
-  "fr-FR": require("./lang/dateTimeFormats/fr-FR.json"),
-  "gl-ES": require("./lang/dateTimeFormats/gl-ES.json"),
-  "he-IL": require("./lang/dateTimeFormats/he-IL.json"),
-  "hr-HR": require("./lang/dateTimeFormats/hr-HR.json"),
-  "hu-HU": require("./lang/dateTimeFormats/hu-HU.json"),
-  "is-IS": require("./lang/dateTimeFormats/is-IS.json"),
-  "it-IT": require("./lang/dateTimeFormats/it-IT.json"),
-  "ja-JP": require("./lang/dateTimeFormats/ja-JP.json"),
-  "ko-KR": require("./lang/dateTimeFormats/ko-KR.json"),
-  "lt-LT": require("./lang/dateTimeFormats/lt-LT.json"),
-  "lv-LV": require("./lang/dateTimeFormats/lv-LV.json"),
-  "nl-NL": require("./lang/dateTimeFormats/nl-NL.json"),
-  "no-NO": require("./lang/dateTimeFormats/no-NO.json"),
-  "pl-PL": require("./lang/dateTimeFormats/pl-PL.json"),
-  "pt-BR": require("./lang/dateTimeFormats/pt-BR.json"),
-  "pt-PT": require("./lang/dateTimeFormats/pt-PT.json"),
-  "ro-RO": require("./lang/dateTimeFormats/ro-RO.json"),
-  "ru-RU": require("./lang/dateTimeFormats/ru-RU.json"),
-  "sk-SK": require("./lang/dateTimeFormats/sk-SK.json"),
-  "sl-SI": require("./lang/dateTimeFormats/sl-SI.json"),
-  "sr-SP": require("./lang/dateTimeFormats/sr-SP.json"),
-  "sv-SE": require("./lang/dateTimeFormats/sv-SE.json"),
-  "tr-TR": require("./lang/dateTimeFormats/tr-TR.json"),
-  "uk-UA": require("./lang/dateTimeFormats/uk-UA.json"),
-  "vi-VN": require("./lang/dateTimeFormats/vi-VN.json"),
-  "zh-CN": require("./lang/dateTimeFormats/zh-CN.json"),
-  "zh-TW": require("./lang/dateTimeFormats/zh-TW.json"),
+  "af-ZA": () => import("./lang/dateTimeFormats/af-ZA.json"),
+  "ar-SA": () => import("./lang/dateTimeFormats/ar-SA.json"),
+  "bg-BG": () => import("./lang/dateTimeFormats/bg-BG.json"),
+  "ca-ES": () => import("./lang/dateTimeFormats/ca-ES.json"),
+  "cs-CZ": () => import("./lang/dateTimeFormats/cs-CZ.json"),
+  "da-DK": () => import("./lang/dateTimeFormats/da-DK.json"),
+  "de-DE": () => import("./lang/dateTimeFormats/de-DE.json"),
+  "el-GR": () => import("./lang/dateTimeFormats/el-GR.json"),
+  "en-GB": () => import("./lang/dateTimeFormats/en-GB.json"),
+  "en-US": () => import("./lang/dateTimeFormats/en-US.json"),
+  "es-ES": () => import("./lang/dateTimeFormats/es-ES.json"),
+  "et-EE": () => import("./lang/dateTimeFormats/et-EE.json"),
+  "fi-FI": () => import("./lang/dateTimeFormats/fi-FI.json"),
+  "fr-BE": () => import("./lang/dateTimeFormats/fr-BE.json"),
+  "fr-CA": () => import("./lang/dateTimeFormats/fr-CA.json"),
+  "fr-FR": () => import("./lang/dateTimeFormats/fr-FR.json"),
+  "gl-ES": () => import("./lang/dateTimeFormats/gl-ES.json"),
+  "he-IL": () => import("./lang/dateTimeFormats/he-IL.json"),
+  "hr-HR": () => import("./lang/dateTimeFormats/hr-HR.json"),
+  "hu-HU": () => import("./lang/dateTimeFormats/hu-HU.json"),
+  "is-IS": () => import("./lang/dateTimeFormats/is-IS.json"),
+  "it-IT": () => import("./lang/dateTimeFormats/it-IT.json"),
+  "ja-JP": () => import("./lang/dateTimeFormats/ja-JP.json"),
+  "ko-KR": () => import("./lang/dateTimeFormats/ko-KR.json"),
+  "lt-LT": () => import("./lang/dateTimeFormats/lt-LT.json"),
+  "lv-LV": () => import("./lang/dateTimeFormats/lv-LV.json"),
+  "nl-NL": () => import("./lang/dateTimeFormats/nl-NL.json"),
+  "no-NO": () => import("./lang/dateTimeFormats/no-NO.json"),
+  "pl-PL": () => import("./lang/dateTimeFormats/pl-PL.json"),
+  "pt-BR": () => import("./lang/dateTimeFormats/pt-BR.json"),
+  "pt-PT": () => import("./lang/dateTimeFormats/pt-PT.json"),
+  "ro-RO": () => import("./lang/dateTimeFormats/ro-RO.json"),
+  "ru-RU": () => import("./lang/dateTimeFormats/ru-RU.json"),
+  "sk-SK": () => import("./lang/dateTimeFormats/sk-SK.json"),
+  "sl-SI": () => import("./lang/dateTimeFormats/sl-SI.json"),
+  "sr-SP": () => import("./lang/dateTimeFormats/sr-SP.json"),
+  "sv-SE": () => import("./lang/dateTimeFormats/sv-SE.json"),
+  "tr-TR": () => import("./lang/dateTimeFormats/tr-TR.json"),
+  "uk-UA": () => import("./lang/dateTimeFormats/uk-UA.json"),
+  "vi-VN": () => import("./lang/dateTimeFormats/vi-VN.json"),
+  "zh-CN": () => import("./lang/dateTimeFormats/zh-CN.json"),
+  "zh-TW": () => import("./lang/dateTimeFormats/zh-TW.json"),
   // END: DATE_LOCALES
 };
 
diff --git a/frontend/layouts/basic.vue b/frontend/layouts/basic.vue
index 2eb9958a9..a74383f30 100644
--- a/frontend/layouts/basic.vue
+++ b/frontend/layouts/basic.vue
@@ -1,6 +1,5 @@
 <template>
   <v-app dark>
-    <NuxtPwaManifest />
     <TheSnackbar />
 
     <AppHeader :menu="false" />
diff --git a/frontend/layouts/blank.vue b/frontend/layouts/blank.vue
index 83d44e823..b7a760679 100644
--- a/frontend/layouts/blank.vue
+++ b/frontend/layouts/blank.vue
@@ -1,6 +1,5 @@
 <template>
   <v-app dark>
-    <NuxtPwaManifest />
     <TheSnackbar />
 
     <v-banner
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index f2fc21ba9..99bcf2c17 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -1,5 +1,4 @@
 import { defineNuxtConfig } from "nuxt/config";
-import commonjs from "vite-plugin-commonjs";
 
 const AUTH_TOKEN = "mealie.auth.token";
 
@@ -56,6 +55,7 @@ export default defineNuxtConfig({
         { "rel": "shortcut icon", "type": "image/png", "href": "/icons/icon-x64.png", "data-n-head": "ssr" },
         { "rel": "apple-touch-icon", "type": "image/png", "href": "/icons/apple-touch-icon.png", "data-n-head": "ssr" },
         { "rel": "mask-icon", "href": "/icons/safari-pinned-tab.svg", "data-n-head": "ssr" },
+        { "rel": "manifest", "href": "/manifest.webmanifest", "data-n-head": "ssr" },
       ],
     },
 
@@ -126,12 +126,6 @@ export default defineNuxtConfig({
     baseURL: process.env.SUB_PATH || "",
   },
 
-  vite: {
-    plugins: [
-      commonjs(),
-    ],
-  },
-
   auth: {
     isEnabled: true,
     // disableServerSideAuth: true,
@@ -240,37 +234,57 @@ export default defineNuxtConfig({
     vueI18n: "./../i18n.config.ts", // note: we need to up one ../ because the default root of lang dir is the /frontend/i18n, which can not be configured
   },
 
-  // PWA module configuration: https://go.nuxtjs.dev/pwa
+  // PWA module configuration: https://vite-pwa-org.netlify.app/frameworks/nuxt.html
   pwa: {
-    mode: process.env.NODE_ENV === "production" ? "production" : "development",
     registerType: "autoUpdate",
-    useCredentials: true,
+    devOptions: {
+      enabled: false,
+      suppressWarnings: true,
+    },
+    workbox: {
+      navigateFallback: "/",
+      globPatterns: ["**/*.{js,css,html,png,svg,ico}"],
+      cleanupOutdatedCaches: true,
+      skipWaiting: true,
+      clientsClaim: true,
+    },
+    client: {
+      installPrompt: true,
+      periodicSyncForUpdates: 120,
+    },
+    includeAssets: ["favicon.ico", "apple-touch-icon.png", "safari-pinned-tab.svg"],
     manifest: {
-      start_url: "/",
-      scope: "/",
-      lang: "en",
       name: "Mealie",
       short_name: "Mealie",
-      id: "mealie",
-      description: "Mealie is a recipe management and meal planning app",
-      theme_color: process.env.THEME_LIGHT_PRIMARY || "#E58325",
-      background_color: "#FFFFFF",
+      id: "/",
+      start_url: "/",
+      scope: "/",
       display: "standalone",
+      background_color: "#FFFFFF",
+      theme_color: process.env.THEME_LIGHT_PRIMARY || "#E58325",
+      description: "Mealie is a recipe management and meal planning app",
+      lang: "en",
       display_override: [
         "standalone",
         "minimal-ui",
         "browser",
         "window-controls-overlay",
       ],
+      orientation: "portrait-primary",
+      categories: ["food", "lifestyle"],
+      prefer_related_applications: false,
+      handle_links: "preferred",
+      launch_handler: {
+        client_mode: ["focus-existing", "auto"],
+      },
+      edge_side_panel: {
+        preferred_width: 400,
+      },
       share_target: {
         action: "/r/create/url",
         method: "GET",
         params: {
-          /* title and url are not currently used in Mealie. If there are issues
-              with sharing, uncommenting those lines might help solve the puzzle. */
-          // "title": "title",
           text: "recipe_import_url",
-          // "url": "url",
         },
       },
       icons: [
@@ -383,17 +397,6 @@ export default defineNuxtConfig({
           ],
         },
       ],
-      prefer_related_applications: false,
-      handle_links: "preferred",
-      categories: [
-        "food",
-      ],
-      launch_handler: {
-        client_mode: ["focus-existing", "auto"],
-      },
-      edge_side_panel: {
-        preferred_width: 400,
-      },
     },
   },
 
diff --git a/frontend/pages/admin/manage/groups/[id].vue b/frontend/pages/admin/manage/groups/[id].vue
index b79dab3e5..9728c265a 100644
--- a/frontend/pages/admin/manage/groups/[id].vue
+++ b/frontend/pages/admin/manage/groups/[id].vue
@@ -9,7 +9,7 @@
           width="100%"
           max-height="125"
           max-width="125"
-          :src="require('~/static/svgs/manage-group-settings.svg')"
+          src="/svgs/manage-group-settings.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/admin/manage/households/[id].vue b/frontend/pages/admin/manage/households/[id].vue
index a0a2a789b..8d11fcd1f 100644
--- a/frontend/pages/admin/manage/households/[id].vue
+++ b/frontend/pages/admin/manage/households/[id].vue
@@ -9,7 +9,7 @@
           width="100%"
           max-height="125"
           max-width="125"
-          :src="require('~/static/svgs/manage-group-settings.svg')"
+          src="/svgs/manage-group-settings.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/admin/manage/users/[id].vue b/frontend/pages/admin/manage/users/[id].vue
index a0f000075..1908277f4 100644
--- a/frontend/pages/admin/manage/users/[id].vue
+++ b/frontend/pages/admin/manage/users/[id].vue
@@ -9,7 +9,7 @@
           width="100%"
           max-height="125"
           max-width="125"
-          :src="require('~/static/svgs/manage-profile.svg')"
+          src="/svgs/manage-profile.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/admin/manage/users/create.vue b/frontend/pages/admin/manage/users/create.vue
index 0fa39abc4..17cd93350 100644
--- a/frontend/pages/admin/manage/users/create.vue
+++ b/frontend/pages/admin/manage/users/create.vue
@@ -6,7 +6,7 @@
           width="100%"
           max-height="125"
           max-width="125"
-          :src="require('~/static/svgs/manage-profile.svg')"
+          src="/svgs/manage-profile.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/admin/site-settings.vue b/frontend/pages/admin/site-settings.vue
index ffbfedd44..7e0828b49 100644
--- a/frontend/pages/admin/site-settings.vue
+++ b/frontend/pages/admin/site-settings.vue
@@ -10,7 +10,7 @@
           width="100%"
           max-height="200"
           max-width="150"
-          :src="require('~/static/svgs/admin-site-settings.svg')"
+          src="/svgs/admin-site-settings.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/g/[groupSlug]/cookbooks/index.vue b/frontend/pages/g/[groupSlug]/cookbooks/index.vue
index ad6ed0a55..9f4908d81 100644
--- a/frontend/pages/g/[groupSlug]/cookbooks/index.vue
+++ b/frontend/pages/g/[groupSlug]/cookbooks/index.vue
@@ -42,7 +42,7 @@
     <v-container class="px-12" max-width="1000">
       <BasePageTitle divider>
         <template #header>
-          <v-img width="100%" max-height="100" max-width="100" :src="require('~/static/svgs/manage-cookbooks.svg')" />
+          <v-img width="100%" max-height="100" max-width="100" src="/svgs/manage-cookbooks.svg" />
         </template>
         <template #title>
           {{ $t("cookbook.cookbooks") }}
diff --git a/frontend/pages/g/[groupSlug]/r/create.vue b/frontend/pages/g/[groupSlug]/r/create.vue
index e91a7f9d4..e541e2a6c 100644
--- a/frontend/pages/g/[groupSlug]/r/create.vue
+++ b/frontend/pages/g/[groupSlug]/r/create.vue
@@ -7,7 +7,7 @@
             width="100%"
             max-height="175"
             max-width="175"
-            :src="require('~/static/svgs/recipes-create.svg')"
+            src="/svgs/recipes-create.svg"
           />
         </template>
         <template #title>
diff --git a/frontend/pages/g/[groupSlug]/recipes/finder/index.vue b/frontend/pages/g/[groupSlug]/recipes/finder/index.vue
index f47562e38..d5993d26c 100644
--- a/frontend/pages/g/[groupSlug]/recipes/finder/index.vue
+++ b/frontend/pages/g/[groupSlug]/recipes/finder/index.vue
@@ -6,7 +6,7 @@
           width="100"
           max-height="100"
           max-width="100"
-          :src="require('~/static/svgs/manage-cookbooks.svg')"
+          src="/svgs/manage-cookbooks.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/g/[groupSlug]/recipes/timeline.vue b/frontend/pages/g/[groupSlug]/recipes/timeline.vue
index 21fb9d22e..896160cff 100644
--- a/frontend/pages/g/[groupSlug]/recipes/timeline.vue
+++ b/frontend/pages/g/[groupSlug]/recipes/timeline.vue
@@ -9,7 +9,7 @@
           width="100%"
           max-height="200"
           max-width="150"
-          :src="require('~/static/svgs/manage-members.svg')"
+          src="/svgs/manage-members.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/group/data.vue b/frontend/pages/group/data.vue
index de0d984d1..66253db00 100644
--- a/frontend/pages/group/data.vue
+++ b/frontend/pages/group/data.vue
@@ -6,7 +6,7 @@
           width="100%"
           max-height="175"
           max-width="175"
-          :src="require('~/static/svgs/manage-recipes.svg')"
+          src="/svgs/manage-recipes.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/group/index.vue b/frontend/pages/group/index.vue
index 132115e21..cf6c3f56d 100644
--- a/frontend/pages/group/index.vue
+++ b/frontend/pages/group/index.vue
@@ -6,7 +6,7 @@
           width="100%"
           max-height="100"
           max-width="100"
-          :src="require('~/static/svgs/manage-group-settings.svg')"
+          src="/svgs/manage-group-settings.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/group/migrations.vue b/frontend/pages/group/migrations.vue
index f2195664e..4286bbd0e 100644
--- a/frontend/pages/group/migrations.vue
+++ b/frontend/pages/group/migrations.vue
@@ -7,7 +7,7 @@
           max-height="200"
           max-width="200"
           class="mb-2"
-          :src="require('~/static/svgs/manage-data-migrations.svg')"
+          src="/svgs/manage-data-migrations.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/group/reports/[id].vue b/frontend/pages/group/reports/[id].vue
index d8ece4618..824701b22 100644
--- a/frontend/pages/group/reports/[id].vue
+++ b/frontend/pages/group/reports/[id].vue
@@ -7,7 +7,7 @@
           max-height="200"
           max-width="200"
           class="mb-2"
-          :src="require('~/static/svgs/data-reports.svg')"
+          src="/svgs/data-reports.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/household/index.vue b/frontend/pages/household/index.vue
index fca6d5d43..20d6eeea8 100644
--- a/frontend/pages/household/index.vue
+++ b/frontend/pages/household/index.vue
@@ -8,7 +8,7 @@
           width="100%"
           max-height="100"
           max-width="100"
-          :src="require('~/static/svgs/manage-group-settings.svg')"
+          src="/svgs/manage-group-settings.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/household/mealplan/settings.vue b/frontend/pages/household/mealplan/settings.vue
index 87c18ad5e..a80487a21 100644
--- a/frontend/pages/household/mealplan/settings.vue
+++ b/frontend/pages/household/mealplan/settings.vue
@@ -6,7 +6,7 @@
           width="100%"
           max-height="100"
           max-width="100"
-          :src="require('~/static/svgs/manage-cookbooks.svg')"
+          src="/svgs/manage-cookbooks.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/household/members.vue b/frontend/pages/household/members.vue
index 25792d8fd..4f8eaedb6 100644
--- a/frontend/pages/household/members.vue
+++ b/frontend/pages/household/members.vue
@@ -6,7 +6,7 @@
           width="100%"
           max-height="125"
           max-width="125"
-          :src="require('~/static/svgs/manage-members.svg')"
+          src="/svgs/manage-members.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/household/notifiers.vue b/frontend/pages/household/notifiers.vue
index f5cfe86a9..75bd345f0 100644
--- a/frontend/pages/household/notifiers.vue
+++ b/frontend/pages/household/notifiers.vue
@@ -37,7 +37,7 @@
           width="100%"
           max-height="125"
           max-width="125"
-          :src="require('~/static/svgs/manage-notifiers.svg')"
+          src="/svgs/manage-notifiers.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/household/webhooks.vue b/frontend/pages/household/webhooks.vue
index ffb05794d..ff124ea0b 100644
--- a/frontend/pages/household/webhooks.vue
+++ b/frontend/pages/household/webhooks.vue
@@ -6,7 +6,7 @@
           width="100%"
           max-height="125"
           max-width="125"
-          :src="require('~/static/svgs/manage-webhooks.svg')"
+          src="/svgs/manage-webhooks.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/shopping-lists/[id].vue b/frontend/pages/shopping-lists/[id].vue
index 0b70ac8ec..8d76b99cc 100644
--- a/frontend/pages/shopping-lists/[id].vue
+++ b/frontend/pages/shopping-lists/[id].vue
@@ -57,7 +57,7 @@
               <v-img
                 max-height="100"
                 max-width="100"
-                :src="require('~/static/svgs/shopping-cart.svg')"
+                src="/svgs/shopping-cart.svg"
               />
             </v-col>
             <v-col class="d-flex justify-end">
diff --git a/frontend/pages/shopping-lists/index.vue b/frontend/pages/shopping-lists/index.vue
index 69bd913a9..d8e6fa996 100644
--- a/frontend/pages/shopping-lists/index.vue
+++ b/frontend/pages/shopping-lists/index.vue
@@ -55,7 +55,7 @@
           width="100%"
           max-height="100"
           max-width="100"
-          :src="require('~/static/svgs/shopping-cart.svg')"
+          src="/svgs/shopping-cart.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/user/profile/api-tokens.vue b/frontend/pages/user/profile/api-tokens.vue
index 35e16b418..55dcc9a5d 100644
--- a/frontend/pages/user/profile/api-tokens.vue
+++ b/frontend/pages/user/profile/api-tokens.vue
@@ -6,7 +6,7 @@
           width="100%"
           max-height="200px"
           max-width="200px"
-          :src="require('~/static/svgs/manage-api-tokens.svg')"
+          src="/svgs/manage-api-tokens.svg"
         />
       </template>
       <template #title>
diff --git a/frontend/pages/user/profile/index.vue b/frontend/pages/user/profile/index.vue
index aed722073..92fa71f31 100644
--- a/frontend/pages/user/profile/index.vue
+++ b/frontend/pages/user/profile/index.vue
@@ -91,7 +91,7 @@
         >
           <UserProfileLinkCard
             :link="{ text: $t('profile.manage-user-profile'), to: `/user/profile/edit` }"
-            :image="require('~/static/svgs/manage-profile.svg')"
+            image="/svgs/manage-profile.svg"
           >
             <template #title>
               {{ $t('profile.user-settings') }}
@@ -107,7 +107,7 @@
           >
             <UserProfileLinkCard
               :link="{ text: $t('profile.manage-your-api-tokens'), to: `/user/profile/api-tokens` }"
-              :image="require('~/static/svgs/manage-api-tokens.svg')"
+              image="/svgs/manage-api-tokens.svg"
             >
               <template #title>
                 {{ $t('settings.token.api-tokens') }}
@@ -135,7 +135,7 @@
         >
           <UserProfileLinkCard
             :link="{ text: $t('profile.household-settings'), to: `/household` }"
-            :image="require('~/static/svgs/manage-group-settings.svg')"
+            image="/svgs/manage-group-settings.svg"
           >
             <template #title>
               {{ $t('profile.household-settings') }}
@@ -150,7 +150,7 @@
         >
           <UserProfileLinkCard
             :link="{ text: $t('profile.manage-cookbooks'), to: `/g/${groupSlug}/cookbooks` }"
-            :image="require('~/static/svgs/manage-cookbooks.svg')"
+            image="/svgs/manage-cookbooks.svg"
           >
             <template #title>
               {{ $t('sidebar.cookbooks') }}
@@ -166,7 +166,7 @@
         >
           <UserProfileLinkCard
             :link="{ text: $t('profile.manage-members'), to: `/household/members` }"
-            :image="require('~/static/svgs/manage-members.svg')"
+            image="/svgs/manage-members.svg"
           >
             <template #title>
               {{ $t('profile.members') }}
@@ -183,7 +183,7 @@
           >
             <UserProfileLinkCard
               :link="{ text: $t('profile.manage-webhooks'), to: `/household/webhooks` }"
-              :image="require('~/static/svgs/manage-webhooks.svg')"
+              image="/svgs/manage-webhooks.svg"
             >
               <template #title>
                 {{ $t('settings.webhooks.webhooks') }}
@@ -200,7 +200,7 @@
           >
             <UserProfileLinkCard
               :link="{ text: $t('profile.manage-notifiers'), to: `/household/notifiers` }"
-              :image="require('~/static/svgs/manage-notifiers.svg')"
+              image="/svgs/manage-notifiers.svg"
             >
               <template #title>
                 {{ $t('profile.notifiers') }}
@@ -228,7 +228,7 @@
         >
           <UserProfileLinkCard
             :link="{ text: $t('profile.group-settings'), to: `/group` }"
-            :image="require('~/static/svgs/manage-group-settings.svg')"
+            image="/svgs/manage-group-settings.svg"
           >
             <template #title>
               {{ $t('profile.group-settings') }}
@@ -244,7 +244,7 @@
         >
           <UserProfileLinkCard
             :link="{ text: $t('profile.manage-data'), to: `/group/data/foods` }"
-            :image="require('~/static/svgs/manage-recipes.svg')"
+            image="/svgs/manage-recipes.svg"
           >
             <template #title>
               {{ $t('profile.manage-data') }}
@@ -260,7 +260,7 @@
           >
             <UserProfileLinkCard
               :link="{ text: $t('profile.manage-data-migrations'), to: `/group/migrations` }"
-              :image="require('~/static/svgs/manage-data-migrations.svg')"
+              image="/svgs/manage-data-migrations.svg"
             >
               <template #title>
                 {{ $t('profile.data-migrations') }}