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

<template>
  <NuxtLayout name="default">
    <NotFound v-if="notFound" />
    <ContentBuilder v-else-if="showContentBuilder" :hero="page?.hero" :content="page?.content" />
    <CollectionDetail v-else :data="detail" />
  </NuxtLayout>
</template>

<script setup lang="ts">
import type Article from "../types/collection/article";
import type Event from "../types/collection/event";
import type Lookup from "../types/collection/lookup";
import type Operation from "../types/collection/operation";
import type Vehicle from "../types/collection/vehicle";
import type Page from "../types/collection/page";
import type NavbarSubItem from "../types/component/itemsNavbarSubItem";
import type Global from "../types/single/global";

const {
  params: { slug: params },
} = useRoute();
const { findOne, find } = useStrapi();

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

const navbar_sub_items = ref<NavbarSubItem[]>(navbar_items.find((ni) => ni.URL == params[0])?.navbar_sub_items ?? []);
const active_item = ref<Page | null | undefined>(navbar_items.find((ni) => ni.URL == params[0])?.page);
const active_sub_item = ref<Page | null | undefined>(navbar_sub_items.value.find((si) => si.URL == params[1])?.page);
const active_page_id = ref<string>(active_sub_item.value?.documentId ?? active_item.value?.documentId ?? "");

const { data: pages } = await useAsyncData("pages", () =>
  findOne<Page | Array<Page>>("pages", active_page_id.value, {
    populate: {
      populate: "*",
      content: {
        populate: "*",
      },
      hero: {
        populate: "*",
      },
    },
    filters: {
      ...(active_page_id.value == "" ? { slug: params[0] } : {}),
    },
  })
);
const page = ref<Page | undefined>(Array.isArray(pages.value?.data) ? pages.value.data[0] : pages.value?.data);

let detail = ref<Article | Operation | Event | Vehicle | undefined>(undefined);
const searchDetail = params[2] || (params[1] && navbar_sub_items.value.length == 0);
if (searchDetail) {
  const paramsFind = params[2] ? [params[0], params[1]] : [params[0]];
  const { data: lookup } = await useAsyncData("lookup", () => find<Lookup>("collection-lookups"));
  const activeLookup: Lookup | undefined = lookup.value?.data.find((l) => paramsFind.includes(l.reference));
  const { data: details } = await useAsyncData("detail", () =>
    find<Article | Operation | Event | Vehicle>(activeLookup?.collection ?? "", {
      populate: "*",
      filters: {
        slug: params[2] ?? params[1],
      },
    })
  );
  detail.value = details.value?.data[0];
}

const notFound = computed(() => {
  if (searchDetail) return !detail.value;
  else return active_page_id.value == "" && !page.value?.content && !page.value?.hero;
});

const showContentBuilder = computed(() => {
  if (searchDetail) return !detail.value;
  else return !!page.value?.content || !!page.value?.hero;
});
</script>