api url and environment

components/CollectionDetail.vue

@@ -50,7 +50,8 @@ import type Operation from "../types/collection/operation";
 import type Event from "../types/collection/event";
 import type Vehicle from "../types/collection/vehicle";
 
-const baseUrl = useStrapiUrl().replace("/api", "");
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
 
 defineProps({
   data: Object as PropType<Article | Operation | Event | Vehicle>,

components/Header.vue

@@ -66,7 +66,8 @@ import type Global from "../types/single/global";
 const {
   params: { slug: params },
 } = useRoute();
-const baseUrl = useStrapiUrl().replace("/api", "");
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
 const { findOne } = useStrapi();
 
 const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));

components/base/ListImageItem.vue

@@ -36,7 +36,8 @@
 import type { PropType } from "vue";
 import type BaseCollection from "~/types/collection/baseCollection";
 
-const baseUrl = useStrapiUrl().replace("/api", "");
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
 
 defineProps({
   data: Object as PropType<BaseCollection>,

components/dynamicZone/ColumnImageText.vue

@@ -15,7 +15,8 @@
 import type { PropType } from "vue";
 import type DynamicZoneColumnImageText from "../../types/component/dynamicZoneColumnImageText";
 
-const baseUrl = useStrapiUrl().replace("/api", "");
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
 
 defineProps({
   data: Object as PropType<DynamicZoneColumnImageText>,

components/dynamicZone/FullImage.vue

@@ -11,7 +11,8 @@
 import type { PropType } from "vue";
 import type DynamicZoneFullImage from "../../types/component/dynamicZoneFullImage";
 
-const baseUrl = useStrapiUrl().replace("/api", "");
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
 
 defineProps({
   data: Object as PropType<DynamicZoneFullImage>,

components/dynamicZone/Gallery.vue

@@ -14,7 +14,8 @@
 import type { PropType } from "vue";
 import type DynamicZoneGallery from "../../types/component/dynamicZoneGallery";
 
-const baseUrl = useStrapiUrl().replace("/api", "");
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
 
 defineProps({
   data: Object as PropType<DynamicZoneGallery>,

components/shared/Hero.vue

@@ -20,5 +20,6 @@ defineProps({
   data: Object as PropType<SharedHero>,
 });
 
-const baseUrl = useStrapiUrl().replace("/api", "");
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
 </script>

components/shared/List.vue

@@ -32,7 +32,10 @@
       />
     </div>
   </div>
-  <div v-if="data?.lookup.date_list" class="flex flex-row w-full justify-between items-center select-none pt-4">
+  <div
+    v-if="data?.lookup.date_list"
+    class="flex flex-row w-full max-w-4xl mx-auto justify-between items-center select-none pt-4"
+  >
     <p class="text-sm font-normal text-gray-500">
       Elemente <span class="font-semibold text-gray-900">{{ showingText }}</span> von
       <span class="font-semibold text-gray-900">{{ entryCount }}</span>
@@ -87,7 +90,8 @@ interface Meta {
   total: number;
 }
 
-const baseUrl = useStrapiUrl().replace("/api", "");
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
 const { find } = useStrapi();
 
 const props = defineProps({

layouts/landing.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative h-[calc(100vh-6rem)] max-h-[calc(100vh-6rem)] w-full overflow-hidden">
+  <div class="relative h-[calc(100svh-6rem)] max-h-[calc(100svh-6rem)] w-full overflow-hidden">
     <NuxtPicture
       loading="lazy"
       class="w-full h-full object-cover object-center"
@@ -20,7 +20,8 @@ import type Homepage from "../types/single/homepage";
 const {
   params: { slug: params },
 } = useRoute();
-const baseUrl = useStrapiUrl().replace("/api", "");
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
 const { findOne } = useStrapi();
 
 const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));

nuxt.config.ts

@@ -35,4 +35,21 @@ export default defineNuxtConfig({
     prefix: "/api",
     version: "v5",
   },
+
+  runtimeConfig: {
+    strapi: {
+      url: process.env.STRAPI_URL ?? "localhost:1337",
+    },
+    app: {
+      title: process.env.APP_TITLE ?? "Feuerwehr",
+    },
+    public: {
+      strapi: {
+        url: process.env.STRAPI_URL ?? "localhost:1337",
+      },
+      app: {
+        title: process.env.APP_TITLE ?? "Feuerwehr",
+      },
+    },
+  },
 });