diff --git a/services/frontend/composables/useAPI.ts b/services/frontend/composables/useAPI.ts
new file mode 100644
index 0000000..aace9a4
--- /dev/null
+++ b/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}
+    )
+}
\ No newline at end of file
diff --git a/services/frontend/nuxt.config.ts b/services/frontend/nuxt.config.ts
index 9ea4264..39c2bde 100644
--- a/services/frontend/nuxt.config.ts
+++ b/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) => {
diff --git a/services/frontend/pages/index.vue b/services/frontend/pages/index.vue
index 522c197..c7f6aa0 100644
--- a/services/frontend/pages/index.vue
+++ b/services/frontend/pages/index.vue
@@ -1,3 +1,3 @@
 <template>
-Index file
-</template>
\ No newline at end of file
+  Index file
+</template>