chore: Nuxt 4 upgrade (#7426)

frontend/app/pages/group/data.vue

@@ -0,0 +1,120 @@
+<template>
+  <v-container>
+    <BasePageTitle>
+      <template #header>
+        <v-img
+          width="100%"
+          max-height="175"
+          max-width="175"
+          src="/svgs/manage-recipes.svg"
+        />
+      </template>
+      <template #title>
+        {{ $t('data-pages.data-management') }}
+      </template>
+      {{ $t('data-pages.data-management-description') }}
+      <template #content>
+        <div>
+          <BaseOverflowButton
+            :btn-text="buttonText"
+            mode="link"
+            rounded
+            :items="DATA_TYPE_OPTIONS"
+          />
+        </div>
+      </template>
+    </BasePageTitle>
+    <section>
+      <v-scroll-x-transition>
+        <div>
+          <NuxtPage />
+        </div>
+      </v-scroll-x-transition>
+    </section>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  middleware: ["can-organize-only"],
+});
+
+const i18n = useI18n();
+const buttonLookup: { [key: string]: string } = {
+  recipes: i18n.t("general.recipes"),
+  recipeActions: i18n.t("recipe.recipe-actions"),
+  foods: i18n.t("general.foods"),
+  units: i18n.t("general.units"),
+  labels: i18n.t("data-pages.labels.labels"),
+  categories: i18n.t("category.categories"),
+  tags: i18n.t("tag.tags"),
+  tools: i18n.t("tool.tools"),
+};
+
+const route = useRoute();
+
+const DATA_TYPE_OPTIONS = computed(() => [
+  {
+    text: i18n.t("general.recipes"),
+    value: "new",
+    to: "/group/data/recipes",
+  },
+  {
+    text: i18n.t("recipe.recipe-actions"),
+    value: "new",
+    to: "/group/data/recipe-actions",
+    divider: true,
+  },
+  {
+    text: i18n.t("general.foods"),
+    value: "url",
+    to: "/group/data/foods",
+  },
+  {
+    text: i18n.t("general.units"),
+    value: "new",
+    to: "/group/data/units",
+  },
+  {
+    text: i18n.t("data-pages.labels.labels"),
+    value: "new",
+    to: "/group/data/labels",
+    divider: true,
+  },
+  {
+    text: i18n.t("category.categories"),
+    value: "new",
+    to: "/group/data/categories",
+  },
+  {
+    text: i18n.t("tag.tags"),
+    value: "new",
+    to: "/group/data/tags",
+  },
+  {
+    text: i18n.t("tool.tools"),
+    value: "new",
+    to: "/group/data/tools",
+  },
+]);
+
+const buttonText = computed(() => {
+  const last = route.path
+    .split("/")
+    .pop()
+  // convert hypenated-values to camelCase
+    ?.replace(/-([a-z])/g, function (g) {
+      return g[1].toUpperCase();
+    });
+
+  if (last) {
+    return buttonLookup[last];
+  }
+
+  return i18n.t("data-pages.select-data");
+});
+
+useSeoMeta({
+  title: i18n.t("data-pages.data-management"),
+});
+</script>