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/composables/api/api-client.ts

@@ -1,7 +1,5 @@
-import { AxiosResponse } from "axios";
-import { useContext } from "@nuxtjs/composition-api";
-import type { NuxtAxiosInstance } from "@nuxtjs/axios";
-import { ApiRequestInstance, RequestResponse } from "~/lib/api/types/non-generated";
+import type { AxiosInstance, AxiosResponse } from "axios";
+import type { ApiRequestInstance, RequestResponse } from "~/lib/api/types/non-generated";
 import { AdminAPI, PublicApi, UserApi } from "~/lib/api";
 import { PublicExploreApi } from "~/lib/api/client-public";
 
@@ -9,7 +7,7 @@ const request = {
   async safe<T, U>(
     funcCall: (url: string, data: U) => Promise<AxiosResponse<T>>,
     url: string,
-    data: U
+    data: U,
   ): Promise<RequestResponse<T>> {
     let error = null;
     const response = await funcCall(url, data).catch(function (e) {
@@ -22,7 +20,7 @@ const request = {
   },
 };
 
-function getRequests(axiosInstance: NuxtAxiosInstance): ApiRequestInstance {
+function getRequests(axiosInstance: AxiosInstance): ApiRequestInstance {
   return {
     async get<T>(url: string, params = {}): Promise<RequestResponse<T>> {
       let error = null;
@@ -36,31 +34,28 @@ function getRequests(axiosInstance: NuxtAxiosInstance): ApiRequestInstance {
     },
 
     async post<T, U>(url: string, data: U) {
-      // eslint-disable-next-line @typescript-eslint/unbound-method
       return await request.safe<T, U>(axiosInstance.post, url, data);
     },
 
     async put<T, U = T>(url: string, data: U) {
-      // eslint-disable-next-line @typescript-eslint/unbound-method
       return await request.safe<T, U>(axiosInstance.put, url, data);
     },
 
     async patch<T, U = Partial<T>>(url: string, data: U) {
-      // eslint-disable-next-line @typescript-eslint/unbound-method
       return await request.safe<T, U>(axiosInstance.patch, url, data);
     },
 
     async delete<T>(url: string) {
-      // eslint-disable-next-line @typescript-eslint/unbound-method
       return await request.safe<T, undefined>(axiosInstance.delete, url, undefined);
     },
   };
 }
 
 export const useRequests = function (): ApiRequestInstance {
-  const { $axios, i18n } = useContext();
+  const i18n = useI18n();
+  const { $axios } = useNuxtApp();
 
-  $axios.setHeader("Accept-Language", i18n.locale);
+  $axios.defaults.headers.common["Accept-Language"] = i18n.locale.value;
 
   return getRequests($axios);
 };
@@ -83,4 +78,4 @@ export const usePublicApi = function (): PublicApi {
 export const usePublicExploreApi = function (groupSlug: string): PublicExploreApi {
   const requests = useRequests();
   return new PublicExploreApi(requests, groupSlug);
-}
+};

frontend/composables/api/static-routes.ts

@@ -1,15 +1,12 @@
-import { useContext } from "@nuxtjs/composition-api";
-import { detectServerBaseUrl } from "../use-utils";
-
 function UnknownToString(ukn: string | unknown) {
   return typeof ukn === "string" ? ukn : "";
 }
 
 export const useStaticRoutes = () => {
-  const { $config, req } = useContext();
-  const serverBase = detectServerBaseUrl(req);
+  const { $config } = useNuxtApp();
+  const serverBase = useRequestURL().origin;
 
-  const prefix = `${$config.SUB_PATH as string}/api`.replace("//", "/");
+  const prefix = `${$config.public.SUB_PATH}/api`.replace("//", "/");
 
   const fullBase = serverBase + prefix;
 
@@ -20,13 +17,13 @@ export const useStaticRoutes = () => {
 
   function recipeSmallImage(recipeId: string, version: string | unknown = "", key: string | number = 1) {
     return `${fullBase}/media/recipes/${recipeId}/images/min-original.webp?rnd=${key}&version=${UnknownToString(
-      version
+      version,
     )}`;
   }
 
   function recipeTinyImage(recipeId: string, version: string | unknown = "", key: string | number = 1) {
     return `${fullBase}/media/recipes/${recipeId}/images/tiny-original.webp?rnd=${key}&version=${UnknownToString(
-      version
+      version,
     )}`;
   }
 

frontend/composables/api/use-app-info.ts

@@ -1,17 +1,17 @@
-import { ref, Ref, useAsync, useContext } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
-import { AppInfo } from "~/lib/api/types/admin";
+import type { AppInfo } from "~/lib/api/types/admin";
 
 export function useAppInfo(): Ref<AppInfo | null> {
   const appInfo = ref<null | AppInfo>(null);
 
-  const { $axios, i18n } = useContext();
-  $axios.setHeader("Accept-Language", i18n.locale);
+  const i18n = useI18n();
+  const { $axios } = useNuxtApp();
+  $axios.defaults.headers.common["Accept-Language"] = i18n.locale.value;
 
-  useAsync(async () => {
+  useAsyncData(useAsyncKey(), async () => {
     const data = await $axios.get<AppInfo>("/api/app/about");
     appInfo.value = data.data;
-  }, useAsyncKey());
+  });
 
   return appInfo;
 }

frontend/composables/api/use-axios-download.ts

@@ -1,22 +0,0 @@
-import { useContext } from "@nuxtjs/composition-api";
-
-export function useAxiosDownloader() {
-  const { $axios } = useContext();
-
-  function download(url: string, filename: string) {
-    $axios({
-      url,
-      method: "GET",
-      responseType: "blob",
-    }).then((response) => {
-      const url = window.URL.createObjectURL(new Blob([response.data]));
-      const link = document.createElement("a");
-      link.href = url;
-      link.setAttribute("download", filename);
-      document.body.appendChild(link);
-      link.click();
-    });
-  }
-
-  return download;
-}

frontend/composables/api/use-downloader.ts

@@ -0,0 +1,18 @@
+export function useDownloader() {
+  function download(url: string, filename: string) {
+    useFetch(url, {
+      method: "GET",
+      responseType: "blob",
+      onResponse({ response }) {
+        const url = window.URL.createObjectURL(new Blob([response._data]));
+        const link = document.createElement("a");
+        link.href = url;
+        link.setAttribute("download", filename);
+        document.body.appendChild(link);
+        link.click();
+      },
+    });
+  }
+
+  return download;
+}