added useAPI for backend communication

services/frontend/composables/useAPI.ts

@@ -0,0 +1,19 @@
+import type { UseFetchOptions } from "nuxt/app";
+
+export function useAPI<T>(
+    endpoint: string,
+    options?: UseFetchOptions<T>,
+) {
+    if (!endpoint.startsWith("/")) {
+        endpoint = `/${endpoint}`
+    }
+
+    const cfg = useRuntimeConfig()
+
+    const fullUrl = `${cfg.public.backendUrl}${endpoint}`
+
+    return useFetch(
+        fullUrl,
+        {...options}
+    )
+}

services/frontend/nuxt.config.ts

@@ -8,6 +8,11 @@ export default defineNuxtConfig({
   build: {
     transpile: ['vuetify'],
   },
+  runtimeConfig: {
+    public: {
+      backendUrl: process.env.BACKEND_URL ?? "http://localhost:8000"
+    },
+  },
   modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {

services/frontend/pages/index.vue

@@ -1,3 +1,3 @@
 <template>
-Index file
-</template>
+  Index file
+</template>