ff-webpage/pages/[...slug].vue

<template>
  <NuxtLayout name="default">
    <NotFound v-if="active_page_id == ''" />
    <ContentBuilder v-else class="min-h-[calc(100vh-9rem)] w-full" :hero="hero" :content="content" />
  </NuxtLayout>
</template>

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

const {
  params: { slug: params },
} = useRoute();
const baseUrl = useStrapiUrl().replace("/api", "");
const { findOne } = useStrapi();

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

const navbar_sub_items = computed(() => {
  return navbar_items.find((ni) => ni.URL == params[0])?.navbar_sub_items ?? [];
});

const active_item = computed(() => {
  return navbar_items.find((ni) => ni.URL == params[0])?.page;
});
const active_sub_item = computed(() => {
  return navbar_sub_items.value.find((si) => si.URL == params[1])?.page;
});
const active_page_id = computed<string>(() => {
  return active_sub_item.value?.documentId ?? active_item.value?.documentId ?? "";
});

const { data: pages } = await useAsyncData("pages", () =>
  findOne<Page>("pages", active_page_id.value, {
    populate: {
      populate: "*",
      content: {
        populate: "*",
      },
      hero: {
        populate: "*",
      },
    },
  })
);
const { content, hero } = pages.value?.data ?? {};
</script>