pass i18n in explicitely so we can defer to onMounted

frontend/components/Layout/DefaultLayout.vue

@@ -138,14 +138,32 @@ export default defineNuxtComponent({
     const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
 
     const cookbookPreferences = useCookbookPreferences();
-    const { store: cookbooks, actions: cookbooksActions } = isOwnGroup.value ? useCookbookStore() : usePublicCookbookStore(groupSlug.value || "");
-    onMounted(() => {
-      if (!cookbooks.value.length) {
-        cookbooksActions.refresh();
-      }
-    });
 
-    const { store: households } = isOwnGroup.value ? useHouseholdStore() : usePublicHouseholdStore(groupSlug.value || "");
+    function useStoreWithRefresh<T>(getStore: () => { store: Ref<T[]>; actions: { refresh: () => void } }) {
+      const { store, actions } = getStore();
+      if (!store.value.length) {
+        actions.refresh();
+      }
+      return store.value;
+    }
+
+    const cookbooks = computed(() => {
+      if (isOwnGroup.value) {
+        return useStoreWithRefresh(() => useCookbookStore());
+      } else if (groupSlug.value) {
+        return useStoreWithRefresh(() => usePublicCookbookStore(groupSlug.value, i18n));
+      }
+      return [];
+    })
+
+    const households = computed(() => {
+      if (isOwnGroup.value) {
+        return useStoreWithRefresh(() => useHouseholdStore());
+      } else if (groupSlug.value) {
+        return useStoreWithRefresh(() => usePublicHouseholdStore(groupSlug.value, i18n));
+      }
+      return [];
+    });
 
     const householdsById = computed(() => {
       return households.value.reduce((acc, household) => {

frontend/composables/api/api-client.ts

@@ -1,4 +1,5 @@
 import type { AxiosInstance, AxiosResponse, AxiosRequestConfig } from "axios";
+import type { Composer } from "vue-i18n";
 import type { ApiRequestInstance, RequestResponse } from "~/lib/api/types/non-generated";
 import { AdminAPI, PublicApi, UserApi } from "~/lib/api";
 import { PublicExploreApi } from "~/lib/api/client-public";
@@ -52,8 +53,12 @@ function getRequests(axiosInstance: AxiosInstance): ApiRequestInstance {
   };
 }
 
-export const useRequests = function (): ApiRequestInstance {
+export const useRequests = function (i18n?: Composer): ApiRequestInstance {
-  const i18n = useI18n();
+  if (!i18n) {
+    // Note: this only works in setup()
+    i18n = useI18n();
+  }
+
   const { $axios } = useNuxtApp();
 
   $axios.defaults.headers.common["Accept-Language"] = i18n.locale.value;
@@ -76,7 +81,7 @@ export const usePublicApi = function (): PublicApi {
   return new PublicApi(requests);
 };
 
-export const usePublicExploreApi = function (groupSlug: string): PublicExploreApi {
+export const usePublicExploreApi = function (groupSlug: string, i18n?: Composer): PublicExploreApi {
-  const requests = useRequests();
+  const requests = useRequests(i18n);
   return new PublicExploreApi(requests, groupSlug);
 };

frontend/composables/store/use-cookbook-store.ts

@@ -1,6 +1,7 @@
 import { useReadOnlyStore, useStore } from "../partials/use-store-factory";
 import type { RecipeCookBook } from "~/lib/api/types/cookbook";
 import { usePublicExploreApi, useUserApi } from "~/composables/api";
+import type { Composer } from "vue-i18n";
 
 const store: Ref<RecipeCookBook[]> = ref([]);
 const loading = ref(false);
@@ -11,7 +12,7 @@ export const useCookbookStore = function () {
   return useStore<RecipeCookBook>(store, loading, api.cookbooks);
 };
 
-export const usePublicCookbookStore = function (groupSlug: string) {
+export const usePublicCookbookStore = function (groupSlug: string, i18n?: Composer) {
-  const api = usePublicExploreApi(groupSlug).explore;
+  const api = usePublicExploreApi(groupSlug, i18n).explore;
   return useReadOnlyStore<RecipeCookBook>(store, publicLoading, api.cookbooks);
 };

frontend/composables/store/use-household-store.ts

@@ -1,6 +1,7 @@
 import { useReadOnlyStore } from "../partials/use-store-factory";
 import type { HouseholdSummary } from "~/lib/api/types/household";
 import { usePublicExploreApi, useUserApi } from "~/composables/api";
+import type { Composer } from "vue-i18n";
 
 const store: Ref<HouseholdSummary[]> = ref([]);
 const loading = ref(false);
@@ -11,7 +12,7 @@ export const useHouseholdStore = function () {
   return useReadOnlyStore<HouseholdSummary>(store, loading, api.households);
 };
 
-export const usePublicHouseholdStore = function (groupSlug: string) {
+export const usePublicHouseholdStore = function (groupSlug: string, i18n?: Composer) {
-  const api = usePublicExploreApi(groupSlug).explore;
+  const api = usePublicExploreApi(groupSlug, i18n).explore;
   return useReadOnlyStore<HouseholdSummary>(store, publicLoading, api.households);
 };