mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-10 06:55:35 -04:00
chore: Nuxt 4 upgrade (#7426)
This commit is contained in:
Kuchenpirat
GitHub
116
frontend/app/layouts/admin.vue
Normal file
116
frontend/app/layouts/admin.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<v-app dark>
|
||||
<TheSnackbar />
|
||||
|
||||
<AppHeader>
|
||||
<v-btn
|
||||
icon
|
||||
@click.stop="sidebar = !sidebar"
|
||||
>
|
||||
<v-icon> {{ $globals.icons.menu }}</v-icon>
|
||||
</v-btn>
|
||||
</AppHeader>
|
||||
|
||||
<AppSidebar
|
||||
v-model="sidebar"
|
||||
absolute
|
||||
:top-link="topLinks"
|
||||
:user="{ data: true }"
|
||||
:secondary-header="$t('sidebar.developer')"
|
||||
:secondary-links="developerLinks"
|
||||
/>
|
||||
|
||||
<v-main>
|
||||
<v-scroll-x-transition>
|
||||
<div>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</v-scroll-x-transition>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AppHeader from "@/components/Layout/LayoutParts/AppHeader.vue";
|
||||
import AppSidebar from "@/components/Layout/LayoutParts/AppSidebar.vue";
|
||||
import TheSnackbar from "~/components/Layout/LayoutParts/TheSnackbar.vue";
|
||||
import type { SidebarLinks } from "~/types/application-types";
|
||||
import { useGlobalI18n } from "~/composables/use-global-i18n";
|
||||
|
||||
const i18n = useGlobalI18n();
|
||||
const display = useDisplay();
|
||||
const { $globals } = useNuxtApp();
|
||||
|
||||
const sidebar = ref<boolean>(false);
|
||||
onMounted(() => {
|
||||
sidebar.value = display.lgAndUp.value;
|
||||
});
|
||||
|
||||
const topLinks: SidebarLinks = [
|
||||
{
|
||||
icon: $globals.icons.cog,
|
||||
to: "/admin/site-settings",
|
||||
title: i18n.t("sidebar.site-settings"),
|
||||
restricted: true,
|
||||
},
|
||||
|
||||
// {
|
||||
// icon: $globals.icons.chart,
|
||||
// to: "/admin/analytics",
|
||||
// title: "Analytics",
|
||||
// restricted: true,
|
||||
// },
|
||||
{
|
||||
icon: $globals.icons.user,
|
||||
to: "/admin/manage/users",
|
||||
title: i18n.t("user.users"),
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.household,
|
||||
to: "/admin/manage/households",
|
||||
title: i18n.t("household.households"),
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.group,
|
||||
to: "/admin/manage/groups",
|
||||
title: i18n.t("group.groups"),
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.database,
|
||||
to: "/admin/backups",
|
||||
title: i18n.t("sidebar.backups"),
|
||||
restricted: true,
|
||||
},
|
||||
];
|
||||
|
||||
const developerLinks: SidebarLinks = [
|
||||
{
|
||||
icon: $globals.icons.wrench,
|
||||
to: "/admin/maintenance",
|
||||
title: i18n.t("sidebar.maintenance"),
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.robot,
|
||||
title: i18n.t("recipe.debug"),
|
||||
restricted: true,
|
||||
children: [
|
||||
{
|
||||
icon: $globals.icons.robot,
|
||||
to: "/admin/debug/openai",
|
||||
title: i18n.t("admin.openai"),
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.slotMachine,
|
||||
to: "/admin/debug/parser",
|
||||
title: i18n.t("sidebar.parser"),
|
||||
restricted: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
</script>
|
||||
22
frontend/app/layouts/basic.vue
Normal file
22
frontend/app/layouts/basic.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<v-app dark>
|
||||
<TheSnackbar />
|
||||
|
||||
<AppHeader :menu="false" />
|
||||
<v-main>
|
||||
<v-scroll-x-transition>
|
||||
<div>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</v-scroll-x-transition>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TheSnackbar from "~/components/Layout/LayoutParts/TheSnackbar.vue";
|
||||
import AppHeader from "@/components/Layout/LayoutParts/AppHeader.vue";
|
||||
import { useGlobalI18n } from "~/composables/use-global-i18n";
|
||||
|
||||
useGlobalI18n(); // ensure i18n is initialized
|
||||
</script>
|
||||
26
frontend/app/layouts/blank.vue
Normal file
26
frontend/app/layouts/blank.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<v-app dark>
|
||||
<TheSnackbar />
|
||||
|
||||
<v-banner
|
||||
v-if="$appInfo.demoStatus"
|
||||
sticky
|
||||
>
|
||||
<div class="text-center">
|
||||
<b> {{ $t("demo.info_message_with_version", { version: $appInfo.version }) }} </b>
|
||||
</div>
|
||||
</v-banner>
|
||||
|
||||
<v-main>
|
||||
<v-scroll-x-transition>
|
||||
<div>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</v-scroll-x-transition>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TheSnackbar from "~/components/Layout/LayoutParts/TheSnackbar.vue";
|
||||
</script>
|
||||
10
frontend/app/layouts/default.vue
Normal file
10
frontend/app/layouts/default.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<DefaultLayout />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DefaultLayout from "@/components/Layout/DefaultLayout.vue";
|
||||
import { useGlobalI18n } from "~/composables/use-global-i18n";
|
||||
|
||||
useGlobalI18n(); // ensure i18n is initialized
|
||||
</script>
|
||||
146
frontend/app/layouts/error.vue
Normal file
146
frontend/app/layouts/error.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<v-app
|
||||
v-if="ready"
|
||||
dark
|
||||
>
|
||||
<v-card-title>
|
||||
<slot>
|
||||
<h1 class="mx-auto">
|
||||
{{ $t("page.404-page-not-found") }}
|
||||
</h1>
|
||||
</slot>
|
||||
</v-card-title>
|
||||
<div class="d-flex justify-space-around">
|
||||
<div class="d-flex align-center">
|
||||
<p class="primary--text">
|
||||
4
|
||||
</p>
|
||||
<v-icon
|
||||
color="primary"
|
||||
class="mx-auto mb-0"
|
||||
size="200"
|
||||
>
|
||||
{{ $globals.icons.primary }}
|
||||
</v-icon>
|
||||
<p class="primary--text">
|
||||
4
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<slot name="actions">
|
||||
<v-btn
|
||||
v-for="(button, index) in buttons"
|
||||
:key="index"
|
||||
nuxt
|
||||
:to="button.to"
|
||||
color="primary"
|
||||
>
|
||||
<v-icon start>
|
||||
{{ button.icon }}
|
||||
</v-icon>
|
||||
{{ button.text }}
|
||||
</v-btn>
|
||||
</slot>
|
||||
<v-spacer />
|
||||
</v-card-actions>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGlobalI18n } from "~/composables/use-global-i18n";
|
||||
|
||||
const props = defineProps({
|
||||
error: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
definePageMeta({
|
||||
layout: "basic",
|
||||
});
|
||||
|
||||
const i18n = useGlobalI18n();
|
||||
const auth = useMealieAuth();
|
||||
const { $globals } = useNuxtApp();
|
||||
const ready = ref(false);
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
async function insertGroupSlugIntoRoute() {
|
||||
const groupSlug = ref(auth.user.value?.groupSlug);
|
||||
if (!groupSlug.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
let replaceRoute = false;
|
||||
let routeVal = route.fullPath || "/";
|
||||
if (routeVal[0] !== "/") {
|
||||
routeVal = `/${routeVal}`;
|
||||
}
|
||||
|
||||
// replace "recipe" in URL with "r"
|
||||
if (routeVal.includes("/recipe/")) {
|
||||
replaceRoute = true;
|
||||
routeVal = routeVal.replace("/recipe/", "/r/");
|
||||
}
|
||||
|
||||
// insert groupSlug into URL
|
||||
const routeComponents = routeVal.split("/");
|
||||
if (routeComponents.length < 2 || routeComponents[1].toLowerCase() !== "g") {
|
||||
replaceRoute = true;
|
||||
routeVal = `/g/${groupSlug.value}${routeVal}`;
|
||||
}
|
||||
|
||||
if (replaceRoute) {
|
||||
await router.replace(routeVal);
|
||||
}
|
||||
}
|
||||
|
||||
async function handle404() {
|
||||
const normalizedRoute = route.fullPath.replace(/\/$/, "");
|
||||
const newRoute = normalizedRoute.replace(/^\/group\/(mealplan|members|notifiers|webhooks)(\/.*)?$/, "/household/$1$2");
|
||||
|
||||
if (newRoute !== normalizedRoute) {
|
||||
await router.replace(newRoute);
|
||||
}
|
||||
else {
|
||||
await insertGroupSlugIntoRoute();
|
||||
}
|
||||
|
||||
ready.value = true;
|
||||
}
|
||||
|
||||
if (props.error.statusCode === 404) {
|
||||
handle404();
|
||||
}
|
||||
else {
|
||||
ready.value = true;
|
||||
}
|
||||
|
||||
useSeoMeta({
|
||||
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") },
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-bottom: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
font-size: 200px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user