reduce code duplication

Author: larsrickert

apps/showcase/app/layouts/sidebar.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
    * Whether to hide the page hero.
    */
   hideHero?: boolean;
+  collectionOptions?: UseCollectionOptions;
 }>();
 
 defineSlots<{
@@ -15,11 +16,11 @@ defineSlots<{
   default(): unknown;
 }>();
 
-const { data } = await useCollection();
+const { data } = await useCollection(computed(() => props.collectionOptions));
 </script>
 
 <template>
-  <SidebarLayout>
+  <SidebarLayout :collection-options="props.collectionOptions">
     <template v-if="!props.hideHero" #hero>
       <PageContentHero
         :headline="data?.title"

apps/showcase/app/pages/components/[category]/[name].vue

@@ -4,44 +4,17 @@ import SidebarLayout from "~/layouts/sidebar.vue";
 
 definePageMeta({ layout: false });
 
-const { locale } = useI18n();
 const route = useRoute();
-
 const slug = computed(() => `/components/${route.params.category}/${route.params.name}`);
 
-const collection = await useAsyncData(
-  () => `page-${slug.value}-${locale.value}`,
-  async () => {
-    const collection = `content_${locale.value}` as const;
-    return queryCollection(collection).path(slug.value).first();
-  },
-);
-
-watch(
-  () => collection.data.value,
-  (data) => {
-    // if data is "null", the page content was not found. "undefined" means it is not loaded yet
-    if (data !== null) return;
-    throw showError({
-      message: "Page not found",
-      statusCode: 404,
-    });
-  },
-  { immediate: true },
-);
-
-const data = computed(() => collection.data.value);
-
-useSeoMeta({
-  title: computed(() => collection.data.value?.seo.title),
-  description: computed(() => collection.data.value?.seo.description),
-});
+const collectionOptions: UseCollectionOptions = { slug };
+const { data } = await useCollection(collectionOptions);
 
 const activeTab = useRouteQuery("tab", "overview");
 </script>
 
 <template>
-  <SidebarLayout hide-hero>
+  <SidebarLayout hide-hero :collection-options>
     <ProseH1>{{ data?.title }}</ProseH1>
 
     <OnyxTabs v-model="activeTab" :label="$t('components.details')">

packages/nuxt-docs/app/composables/useCollection.ts

@@ -1,13 +1,25 @@
 import type { Collections } from "@nuxt/content";
 
+export type UseCollectionOptions = {
+  /**
+   * Slug / route path to use for querying the collection.
+   *
+   * @default `slug` route parameter
+   */
+  slug?: MaybeRef<string>;
+};
+
 /**
  * Composable for loading the collection content for the current route and locale.
  */
-export const useCollection = () => {
+export const useCollection = (options?: MaybeRef<UseCollectionOptions | undefined>) => {
   const route = useRoute();
   const { locale } = useI18n();
 
   const slug = computed(() => {
+    const _slug = toValue(toValue(options)?.slug);
+    if (_slug) return _slug;
+
     const path = Array.isArray(route.params.slug)
       ? route.params.slug.join("/")
       : (route.params.slug ?? "");

packages/nuxt-docs/app/layouts/sidebar.vue

@@ -6,6 +6,7 @@ import type { SidebarNavigationItem } from "../composables/useSidebarNavigation.
 const props = defineProps<
   Omit<OnyxPageLayoutProps, "noPadding"> & {
     sidebar?: OnyxSidebarProps;
+    collectionOptions?: UseCollectionOptions;
   }
 >();
 
@@ -43,7 +44,7 @@ const slots = defineSlots<{
 
 const { navigation, previousRootItem } = await useSidebarNavigation();
 
-const collection = await useCollection();
+const collection = await useCollection(computed(() => props.collectionOptions));
 const toc = computed(() => collection.data.value?.body.toc?.links ?? []);
 </script>