ff-webpage/components/Footer.vue

<template>
  <footer darkgray class="h-48 min-h-fit w-full px-5 py-10 flex-col justify-center items-center flex gap-2">
    <div class="self-stretch py-5 justify-center items-center gap-4 md:gap-10 inline-flex flex-wrap">
      <div v-for="link in footer.links" :key="link.id" class="contents">
        <a v-if="link.URL.startsWith('http')" :href="link.URL" :target="link.target" class="text-base">{{
          link.text
        }}</a>
        <NuxtLink
          v-else
          :to="`${link.URL.startsWith('/') ? '' : '/'}${link.URL}`"
          :target="link.target"
          class="text-base"
        >
          {{ link.text }}
        </NuxtLink>
      </div>
    </div>
    <p class="text-base text-center">@Copyright {{ new Date().getFullYear() }} {{ footer.copyright }}</p>
    <p class="text-base text-center">Inhalte verwaltet von {{ footer?.maintained ?? footer.copyright }}</p>
    <p>
      <a href="https://ff-admin.de/webpage" target="_blank">FF Webpage</a>
      entwickelt von
      <a href="https://jk-effects.com" target="_blank">JK Effects</a>
    </p>
  </footer>
</template>

<script setup lang="ts">
import type Global from "../types/single/global";

const { findOne } = useStrapi();

const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
const { footer } = global.value?.data ?? ({} as Global);
</script>