Backend integrated?

frontend/app/assets/css/colors.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $themes: (
     dark: (
         background: #141414,
@@ -24,9 +26,9 @@ $themes: (
 }
 
 :root {
-  @include theme-vars(map-get($themes, dark));
+  @include theme-vars(map.get($themes, dark));
 }
 
 [data-theme="light"] {
-  @include theme-vars(map-get($themes, light));
+  @include theme-vars(map.get($themes, light));
 }

frontend/app/composables/api.js

@@ -0,0 +1,27 @@
+// composables/useApi.js
+import { ref } from 'vue'
+
+export default function useApi() {
+  const config = useRuntimeConfig()
+  const baseUrl = config.public.apiBaseUrl
+
+  // Generic GET request
+  const get = async (endpoint) => {
+    const res = await fetch(`${baseUrl}${endpoint}`)
+    if (!res.ok) throw new Error(`API GET ${endpoint} failed`)
+    return res.json()
+  }
+
+  // Generic POST request
+  const post = async (endpoint, payload) => {
+    const res = await fetch(`${baseUrl}${endpoint}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    })
+    if (!res.ok) throw new Error(`API POST ${endpoint} failed`)
+    return res.json()
+  }
+
+  return { get, post }
+}

frontend/app/pages/index.vue

@@ -1,3 +1,18 @@
+<script setup lang="ts">
+import api from '~/composables/api'
+const { get, post } = api();
+
+onMounted(async () => {
+  try {
+    console.log("Getting")
+    const response = await get('/test');
+    console.log('API Response:', response);
+  } catch (error) {
+    console.error('API Error:', error);
+  }
+});
+</script>
+
 <template>
     <h1>ARANROIG.COM</h1>