diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index 155123214..bf148da49 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -471,7 +471,7 @@ import CopyToClipboard from "@/components/Buttons/CopyToClipboard"
 import GenericMultiselect from "@/components/GenericMultiselect"
 import ShoppingModal from "@/components/Modals/ShoppingModal"
 
-import {ApiMixin, getUserPreference, StandardToasts, makeToast, ResolveUrlMixin} from "@/utils/utils"
+import {ApiMixin, getUserPreference, StandardToasts, makeToast, ResolveUrlMixin, FormatMixin} from "@/utils/utils"
 import {ApiApiFactory} from "@/utils/openapi/api"
 import ShoppingSettingsComponent from "@/components/Settings/ShoppingSettingsComponent";
 
@@ -486,7 +486,7 @@ import NumberScalerComponent from "@/components/NumberScalerComponent.vue";
 
 export default {
     name: "ShoppingListView",
-    mixins: [ApiMixin, ResolveUrlMixin],
+    mixins: [ApiMixin, ResolveUrlMixin, FormatMixin],
     components: {
         NumberScalerComponent,
 
@@ -550,15 +550,6 @@ export default {
     methods: {
         useUserPreferenceStore,
         useShoppingListStore,
-        // TODO move to utils
-        formatDate: function (datetime) {
-            if (!datetime) {
-                return
-            }
-            return Intl.DateTimeFormat(window.navigator.language, {
-                dateStyle: "short",
-            }).format(Date.parse(datetime))
-        },
         /**
          * recursive function calling autosync after set amount of time has passed
          */
diff --git a/vue/src/components/ShoppingLineItem.vue b/vue/src/components/ShoppingLineItem.vue
index 09c79d440..adbc66395 100644
--- a/vue/src/components/ShoppingLineItem.vue
+++ b/vue/src/components/ShoppingLineItem.vue
@@ -116,7 +116,7 @@
 import Vue from "vue"
 import {BootstrapVue} from "bootstrap-vue"
 import "bootstrap-vue/dist/bootstrap-vue.css"
-import {ApiMixin, resolveDjangoUrl, StandardToasts} from "@/utils/utils"
+import {ApiMixin, FormatMixin, resolveDjangoUrl, StandardToasts} from "@/utils/utils"
 import {useMealPlanStore} from "@/stores/MealPlanStore";
 import {useShoppingListStore} from "@/stores/ShoppingListStore";
 import {ApiApiFactory} from "@/utils/openapi/api";
@@ -129,7 +129,7 @@ Vue.use(BootstrapVue)
 
 export default {
     name: "ShoppingLineItem",
-    mixins: [ApiMixin],
+    mixins: [ApiMixin, FormatMixin],
     components: {GenericModalForm, NumberScalerComponent},
     props: {
         entries: {type: Object,},
@@ -247,15 +247,6 @@ export default {
         useUserPreferenceStore,
         useShoppingListStore,
         resolveDjangoUrl,
-        // TODO move to utils
-        formatDate: function (datetime) {
-            if (!datetime) {
-                return
-            }
-            return Intl.DateTimeFormat(window.navigator.language, {
-                dateStyle: "short",
-            }).format(Date.parse(datetime))
-        },
         /**
          * update the food after the category was changed
          * handle changing category to category ID as a workaround
diff --git a/vue/src/utils/utils.js b/vue/src/utils/utils.js
index 00cc3735a..b34396d44 100644
--- a/vue/src/utils/utils.js
+++ b/vue/src/utils/utils.js
@@ -365,6 +365,23 @@ export function energyHeading() {
     }
 }
 
+export const FormatMixin = {
+    name: "FormatMixin",
+    methods: {
+        /**
+         * format short date from datetime
+         * @param datetime any string that can be parsed by Date.parse()
+         * @return {string}
+         */
+        formatDate: function (datetime) {
+            return Intl.DateTimeFormat(window.navigator.language, {
+                dateStyle: "short",
+            }).format(Date.parse(datetime))
+        },
+    },
+}
+
+
 axios.defaults.xsrfCookieName = "csrftoken"
 axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"