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>

frontend/middleware/admin-only.ts

@@ -1,10 +1,7 @@
-interface AdminRedirectParams {
-    $auth: any
-    redirect: (path: string) => void
-}
-export default function ({ $auth, redirect }: AdminRedirectParams) {
-    // If the user is not an admin redirect to the home page
-    if (!$auth.user.admin) {
-        return redirect("/")
-    }
-}
+export default defineNuxtRouteMiddleware(() => {
+  const { user } = useMealieAuth();
+  // If the user is not an admin redirect to the home page
+  if (!user.value?.admin) {
+    navigateTo("/");
+  }
+});

frontend/middleware/advanced-only.ts

@@ -1,11 +1,8 @@
-interface AdvancedOnlyRedirectParams {
-    $auth: any
-    redirect: (path: string) => void
-}
-export default function ({ $auth, redirect }: AdvancedOnlyRedirectParams) {
-    // If the user is not allowed to access advanced features redirect to the home page
-    if (!$auth.user.advanced) {
-        console.warn("User is not allowed to access advanced features");
-        return redirect("/")
-    }
-}
+export default defineNuxtRouteMiddleware(() => {
+  const { user } = useMealieAuth();
+  // If the user is not allowed to access advanced features redirect to the home page
+  if (!user.value?.advanced) {
+    console.warn("User is not allowed to access advanced features");
+    navigateTo("/");
+  }
+});

frontend/middleware/can-manage-household-only.ts

@@ -1,11 +1,7 @@
-interface CanManageRedirectParams {
-  $auth: any
-  redirect: (path: string) => void
-}
-export default function ({ $auth, redirect }: CanManageRedirectParams) {
+const { user } = useMealieAuth();
+export default defineNuxtRouteMiddleware(() => {
   // If the user is not allowed to manage group settings redirect to the home page
-  if (!$auth.user?.canManageHousehold) {
-    console.warn("User is not allowed to manage household settings");
-    return redirect("/");
+  if (!user.value?.canManageHousehold) {
+    navigateTo("/");
   }
-}
+});

frontend/middleware/can-manage-only.ts

@@ -1,12 +1,8 @@
-interface CanManageRedirectParams {
-  $auth: any
-  redirect: (path: string) => void
-}
-export default function ({ $auth, redirect }: CanManageRedirectParams) {
+export default defineNuxtRouteMiddleware(() => {
+  const { user } = useMealieAuth();
   // If the user is not allowed to manage group settings redirect to the home page
-  console.log($auth.user)
-  if (!$auth.user.canManage) {
+  if (!user.value?.canManage) {
     console.warn("User is not allowed to manage group settings");
-    return redirect("/")
+    navigateTo("/");
   }
-}
+});

frontend/middleware/can-organize-only.ts

@@ -1,11 +1,8 @@
-interface CanOrganizeRedirectParams {
-    $auth: any
-    redirect: (path: string) => void
-}
-export default function ({ $auth, redirect }: CanOrganizeRedirectParams) {
-    // If the user is not allowed to organize redirect to the home page
-    if (!$auth.user.canOrganize) {
-        console.warn("User is not allowed to organize data");
-        return redirect("/")
-    }
-}
+export default defineNuxtRouteMiddleware(() => {
+  const { user } = useMealieAuth();
+  // If the user is not allowed to organize data redirect to the home page
+  if (!user.value?.canOrganize) {
+    console.warn("User is not allowed to organize data");
+    navigateTo("/");
+  }
+});

frontend/middleware/group-only.ts

@@ -1,12 +1,7 @@
-interface GroupOnlyRedirectParams {
-  $auth: any
-  route: any
-  redirect: (path: string) => void
-}
-
-export default function ({ $auth, route, redirect }: GroupOnlyRedirectParams) {
+export default defineNuxtRouteMiddleware((to) => {
+  const { user } = useMealieAuth();
   // this can only be used for routes that have a groupSlug parameter (e.g. /g/:groupSlug/...)
-  if (route.params.groupSlug !== $auth.user.groupSlug) {
-    redirect("/")
+  if (to.params.groupSlug !== user.value?.groupSlug) {
+    navigateTo("/");
   }
-}
+});