mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-03 04:25:24 +02:00
feat: Migrate to Nuxt 3 framework (#5184)
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com> Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Hoa (Kyle) Trinh
GitHub
parent
89ab7fac25
commit
c24d532608
403 changed files with 23959 additions and 19557 deletions
|
|
@ -1,5 +1,16 @@
|
|||
<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
|
||||
|
|
@ -10,123 +21,104 @@
|
|||
:secondary-links="developerLinks"
|
||||
/>
|
||||
|
||||
<TheSnackbar />
|
||||
|
||||
<AppHeader>
|
||||
<v-btn icon @click.stop="sidebar = !sidebar">
|
||||
<v-icon> {{ $globals.icons.menu }}</v-icon>
|
||||
</v-btn>
|
||||
</AppHeader>
|
||||
<v-main>
|
||||
<v-scroll-x-transition>
|
||||
<Nuxt />
|
||||
<div>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</v-scroll-x-transition>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, useContext, onMounted } from "@nuxtjs/composition-api";
|
||||
<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 { SidebarLinks } from "~/types/application-types";
|
||||
import type { SidebarLinks } from "~/types/application-types";
|
||||
|
||||
export default defineComponent({
|
||||
components: { AppHeader, AppSidebar, TheSnackbar },
|
||||
middleware: ["auth", "admin-only"],
|
||||
auth: true,
|
||||
setup() {
|
||||
const { $globals, i18n, $vuetify } = useContext();
|
||||
const i18n = useI18n();
|
||||
const { $globals, $vuetify } = useNuxtApp();
|
||||
|
||||
const sidebar = ref<boolean | null>(null);
|
||||
onMounted(() => {
|
||||
sidebar.value = !$vuetify.breakpoint.md;
|
||||
});
|
||||
const sidebar = ref<boolean>(false);
|
||||
onMounted(() => {
|
||||
sidebar.value = !$vuetify.display.md.value;
|
||||
});
|
||||
|
||||
const topLinks: SidebarLinks = [
|
||||
{
|
||||
icon: $globals.icons.cog,
|
||||
to: "/admin/site-settings",
|
||||
title: i18n.tc("sidebar.site-settings"),
|
||||
restricted: true,
|
||||
},
|
||||
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.tc("user.users"),
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.household,
|
||||
to: "/admin/manage/households",
|
||||
title: i18n.tc("household.households"),
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.group,
|
||||
to: "/admin/manage/groups",
|
||||
title: i18n.tc("group.groups"),
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.database,
|
||||
to: "/admin/backups",
|
||||
title: i18n.tc("sidebar.backups"),
|
||||
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.tc("sidebar.maintenance"),
|
||||
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,
|
||||
title: i18n.tc("recipe.debug"),
|
||||
to: "/admin/debug/openai",
|
||||
title: i18n.t("admin.openai"),
|
||||
restricted: true,
|
||||
children: [
|
||||
{
|
||||
icon: $globals.icons.robot,
|
||||
to: "/admin/debug/openai",
|
||||
title: i18n.tc("admin.openai"),
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.slotMachine,
|
||||
to: "/admin/debug/parser",
|
||||
title: i18n.tc("sidebar.parser"),
|
||||
restricted: true,
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
const bottomLinks: SidebarLinks = [
|
||||
{
|
||||
icon: $globals.icons.heart,
|
||||
title: i18n.tc("about.support"),
|
||||
href: "https://github.com/sponsors/hay-kot",
|
||||
icon: $globals.icons.slotMachine,
|
||||
to: "/admin/debug/parser",
|
||||
title: i18n.t("sidebar.parser"),
|
||||
restricted: true,
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
sidebar,
|
||||
topLinks,
|
||||
bottomLinks,
|
||||
developerLinks,
|
||||
};
|
||||
],
|
||||
},
|
||||
});
|
||||
];
|
||||
|
||||
const bottomLinks: SidebarLinks = [
|
||||
{
|
||||
icon: $globals.icons.heart,
|
||||
title: i18n.t("about.support"),
|
||||
href: "https://github.com/sponsors/hay-kot",
|
||||
restricted: true,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,21 +2,22 @@
|
|||
<v-app dark>
|
||||
<TheSnackbar />
|
||||
|
||||
<AppHeader :menu="false"> </AppHeader>
|
||||
<AppHeader :menu="false" />
|
||||
<v-main>
|
||||
<v-scroll-x-transition>
|
||||
<Nuxt />
|
||||
<div>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</v-scroll-x-transition>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import TheSnackbar from "~/components/Layout/LayoutParts/TheSnackbar.vue";
|
||||
import AppHeader from "@/components/Layout/LayoutParts/AppHeader.vue";
|
||||
export default defineComponent({
|
||||
|
||||
export default defineNuxtComponent({
|
||||
components: { TheSnackbar, AppHeader },
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,10 @@
|
|||
<v-app dark>
|
||||
<TheSnackbar />
|
||||
|
||||
<v-banner v-if="isDemo" sticky>
|
||||
<v-banner
|
||||
v-if="isDemo"
|
||||
sticky
|
||||
>
|
||||
<div class="text-center">
|
||||
<b> {{ $t("demo.info_message_with_version", { version: version }) }} </b>
|
||||
</div>
|
||||
|
|
@ -10,24 +13,26 @@
|
|||
|
||||
<v-main>
|
||||
<v-scroll-x-transition>
|
||||
<Nuxt />
|
||||
<div>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</v-scroll-x-transition>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
|
||||
import TheSnackbar from "~/components/Layout/LayoutParts/TheSnackbar.vue";
|
||||
import { useAppInfo } from "~/composables/api";
|
||||
export default defineComponent({
|
||||
|
||||
export default defineNuxtComponent({
|
||||
components: { TheSnackbar },
|
||||
setup() {
|
||||
const appInfo = useAppInfo();
|
||||
|
||||
const isDemo = computed(() => appInfo?.value?.demoStatus || false);
|
||||
|
||||
const { i18n } = useContext();
|
||||
const i18n = useI18n();
|
||||
const version = computed(() => appInfo?.value?.version || i18n.t("about.unknown-version"));
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
|
||||
<template>
|
||||
<DefaultLayout />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import DefaultLayout from "@/components/Layout/DefaultLayout.vue";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
components: { DefaultLayout },
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,52 @@
|
|||
<template>
|
||||
<v-app v-if="ready" dark>
|
||||
<v-app v-if="ready"
|
||||
dark
|
||||
>
|
||||
<v-card-title>
|
||||
<slot>
|
||||
<h1 class="mx-auto">{{ $t("page.404-page-not-found") }}</h1>
|
||||
<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">
|
||||
<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>
|
||||
<p class="primary--text">
|
||||
4
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-spacer />
|
||||
<slot name="actions">
|
||||
<v-btn v-for="(button, index) in buttons" :key="index" nuxt :to="button.to" color="primary">
|
||||
<v-icon left> {{ button.icon }} </v-icon>
|
||||
<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-spacer>
|
||||
<v-spacer />
|
||||
</v-card-actions>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, useContext, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "basic",
|
||||
export default defineNuxtComponent({
|
||||
props: {
|
||||
error: {
|
||||
type: Object,
|
||||
|
|
@ -39,20 +54,26 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { $auth, $globals, i18n } = useContext();
|
||||
definePageMeta({
|
||||
layout: "basic",
|
||||
});
|
||||
|
||||
const i18n = useI18n();
|
||||
const $auth = useMealieAuth();
|
||||
const { $globals } = useNuxtApp();
|
||||
const ready = ref(false);
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
async function insertGroupSlugIntoRoute() {
|
||||
const groupSlug = ref($auth.user?.groupSlug);
|
||||
const groupSlug = ref($auth.user.value?.groupSlug);
|
||||
if (!groupSlug.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
let replaceRoute = false;
|
||||
let routeVal = route.value.fullPath || "/";
|
||||
let routeVal = route.fullPath || "/";
|
||||
if (routeVal[0] !== "/") {
|
||||
routeVal = `/${routeVal}`;
|
||||
}
|
||||
|
|
@ -76,12 +97,13 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
async function handle404() {
|
||||
const normalizedRoute = route.value.fullPath.replace(/\/$/, "");
|
||||
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 {
|
||||
}
|
||||
else {
|
||||
await insertGroupSlugIntoRoute();
|
||||
}
|
||||
|
||||
|
|
@ -90,15 +112,16 @@ export default defineComponent({
|
|||
|
||||
if (props.error.statusCode === 404) {
|
||||
handle404();
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
ready.value = true;
|
||||
}
|
||||
|
||||
useMeta({
|
||||
useSeoMeta({
|
||||
title:
|
||||
props.error.statusCode === 404
|
||||
? (i18n.t("page.404-not-found") as string)
|
||||
: (i18n.t("page.an-error-occurred") as string),
|
||||
props.error.statusCode === 404
|
||||
? (i18n.t("page.404-not-found") as string)
|
||||
: (i18n.t("page.an-error-occurred") as string),
|
||||
});
|
||||
|
||||
const buttons = [
|
||||
|
|
@ -110,8 +133,6 @@ export default defineComponent({
|
|||
ready,
|
||||
};
|
||||
},
|
||||
// Needed for useMeta
|
||||
head: {},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -119,6 +140,7 @@ export default defineComponent({
|
|||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-bottom: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue