@sit-onyx/nuxt-docs 1.0.0-beta.0 → 1.0.0-beta.2

package/app.config.ts

@@ -1,5 +1,6 @@
-import type { OnyxNavBarProps, OnyxNavButtonProps, OnyxNavItemProps } from "sit-onyx";
+import type { OnyxNavBarProps, OnyxNavItemProps } from "sit-onyx";
 
+// TYPES
 declare module "@nuxt/schema" {
   interface AppConfigInput {
     onyxDocs?: OnyxAppConfig;
@@ -12,10 +13,13 @@ declare module "@nuxt/schema" {
 
 export type OnyxAppConfig = {
   nav?: Partial<OnyxNavBarProps> & {
-    items?: (OnyxNavButtonProps & { children?: OnyxNavItemProps[] })[];
+    items?: NavItem[];
   };
 };
 
+export type NavItem = OnyxNavItemProps & { children?: NavItem[] };
+
+// CONFIG
 const defaultAppConfig = {
   nav: {
     appName: "Documentation",

package/components/NavBar.vue

@@ -20,15 +20,11 @@ const colorScheme = computed({
 
 <template>
   <OnyxNavBar v-bind="onyxDocs.nav" @navigate-back="router.back">
-    <OnyxNavButton
+    <NavItem
       v-for="item in onyxDocs.nav?.items"
       :key="extractLinkProps(item.link ?? '').href"
       v-bind="item"
-    >
-      <template v-if="item.children?.length" #children>
-        <OnyxNavItem v-for="child in item.children" :key="child.label" v-bind="child" />
-      </template>
-    </OnyxNavButton>
+    />
 
     <template #contextArea>
       <OnyxIconButton

package/components/NavItem.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { NavItem } from "../app.config";
+
+const props = defineProps<NavItem>();
+
+/**
+ * Same as `props` but without the `children` property to prevent console warnings when using `v-bind`.
+ */
+const navItemProps = computed(() => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { children, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <OnyxNavItem v-bind="navItemProps">
+    <template v-if="props.children?.length" #children>
+      <NavItem v-for="child in props.children" :key="child.label" v-bind="child" />
+    </template>
+  </OnyxNavItem>
+</template>

package/nuxt.config.ts

@@ -2,6 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   compatibilityDate: "2025-01-20",
+  typescript: { typeCheck: "build" },
   modules: [
     "@sit-onyx/nuxt",
     "@nuxt/content",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/nuxt-docs",
   "type": "module",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.2",
   "description": "Nuxt layer/template for creating documentations with the onyx design system",
   "license": "Apache-2.0",
   "repository": {
@@ -23,7 +23,7 @@
     "*.vue",
     "*.json"
   ],
-  "dependencies": {
+  "peerDependencies": {
     "@fontsource-variable/source-code-pro": ">= 5",
     "@fontsource-variable/source-sans-3": ">= 5",
     "@nuxt/content": ">= 3",
@@ -31,15 +31,24 @@
     "@nuxtjs/color-mode": ">= 3",
     "sass-embedded": ">= 1",
     "@sit-onyx/icons": "^1.0.0-beta.14",
-    "@sit-onyx/nuxt": "^1.0.0-beta.191",
-    "sit-onyx": "^1.0.0-beta.189"
+    "@sit-onyx/nuxt": "^1.0.0-beta.192",
+    "sit-onyx": "^1.0.0-beta.190"
   },
   "devDependencies": {
+    "@fontsource-variable/source-code-pro": ">= 5",
+    "@fontsource-variable/source-sans-3": ">= 5",
+    "@nuxt/content": ">= 3",
+    "@nuxt/image": ">= 1",
     "@nuxt/test-utils": "^3.17.2",
-    "nuxt": "^3.16.1",
+    "@nuxtjs/color-mode": ">= 3",
+    "nuxt": "^3.16.2",
+    "sass-embedded": "1.86.3",
     "typescript": "5.8.3",
     "vue": "3.5.13",
-    "@sit-onyx/shared": "^1.0.0-beta.2"
+    "@sit-onyx/icons": "^1.0.0-beta.14",
+    "sit-onyx": "^1.0.0-beta.190",
+    "@sit-onyx/shared": "^1.0.0-beta.2",
+    "@sit-onyx/nuxt": "^1.0.0-beta.192"
   },
   "scripts": {
     "dev": "nuxi dev .playground",

package/pages/[...path].vue

@@ -1,7 +1,19 @@
 <script setup lang="ts">
-const { data } = await useCollection({ collection: "content" });
+const route = useRoute();
+const collection = await useAsyncData(() => queryCollection("content").path(route.path).first());
+
+if (!collection.data.value) {
+  throw createError({
+    message: "Page not found",
+    statusCode: 404,
+  });
+}
+
+const data = toRef(() => collection.data.value!);
+useSeoMeta({ ...data.value.seo });
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if  -- the v-if here is theoretically not needed because we throw above it ifs undefined so the user will be redirected to the error page. However, there is still a console warning so we include the v-if here to prevent it. -->
 <template>
-  <ContentRenderer :value="data" />
+  <ContentRenderer v-if="data" :value="data" />
 </template>

package/composables/useCollection.ts

@@ -1,22 +0,0 @@
-export type UseCollectionOptions = {
-  collection: Parameters<typeof queryCollection>[0];
-};
-
-export const useCollection = async (options: UseCollectionOptions) => {
-  const route = useRoute();
-  const collection = await useAsyncData(() =>
-    queryCollection(options.collection).path(route.path).first(),
-  );
-
-  if (!collection.data.value) {
-    throw createError({
-      message: "Page not found",
-      statusCode: 404,
-    });
-  }
-
-  const data = toRef(() => collection.data.value!);
-  useSeoMeta({ ...data.value.seo });
-
-  return { ...collection, data };
-};