Major Upgrade - Latest Nuxt Packages

app/app.config.ts

@@ -4,7 +4,11 @@ export default defineAppConfig({
 	},
 
 	ui: {
-		primary: 'purple', // Tailwind color name,
+		colors: {
+			primary: 'purple',
+			secondary: 'pink',
+			neutral: 'slate',
+		},
 
 		content: {
 			callout: {
@@ -14,6 +18,21 @@ export default defineAppConfig({
 		},
 	},
 
+	uiPro: {
+		page: {
+			slots: {
+				root: 'lg:gap-8',
+			},
+		},
+		prose: {
+			pre: {
+				slots: {
+					base: 'text-xs/4',
+				},
+			},
+		},
+	},
+
 	header: {
 		nav: [
 			{
@@ -155,6 +174,13 @@ export default defineAppConfig({
 			description: 'Everything you need to start building. Provisioned in 90 seconds.',
 			cta: 'Get Started',
 		},
+		newsletter: {
+			description: 'Get once-a-month release notes & real‑world code tips...no fluff. 🐰',
+			form: {
+				hsPortal: 20534155,
+				hsForm: 'd57a69e4-6f43-4768-a600-5f7d30306260',
+			},
+		},
 	},
 
 	preFooter: {

app/app.vue

@@ -1,69 +1,26 @@
 <script setup lang="ts">
 import { spec } from '@directus/openapi';
-import { useRoute } from 'vue-router';
-import { nextTick, watch } from 'vue';
-const route = useRoute();
+import type { ContentNavigationItem } from '@nuxt/content';
 
-const { data: navigation } = useAsyncData('navigation', () => fetchContentNavigation());
+const { data: navigation } = useAsyncData('content-navigation', () => queryCollectionNavigation('content', ['title', 'description', 'icon', 'links']));
 
 provide('openapi', spec);
-provide('navigation', navigation);
+provide('navigation', navigation as Ref<ContentNavigationItem[]>);
 
 defineOgImage({
 	url: '/img/og-image.png',
 });
-
-const { search } = useAppConfig();
-
-const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false });
-const updateLinks = () => {
-	nextTick(() => {
-		const links = document.querySelectorAll('a');
-		links.forEach(link => {
-			const href = link.getAttribute('href');
-			if (
-				href?.startsWith('http') &&
-				link.hostname !== window.location.hostname
-			) {
-				link.setAttribute('target', '_blank');
-				link.setAttribute('rel', 'noopener noreferrer');
-			}
-		});
-	});
-};
-
-onMounted(() => {
-	nextTick(() => {
-		setTimeout(updateLinks, 100);
-	});
-});
-
-watch(() => route.fullPath, () => {
-	nextTick(() => {
-		setTimeout(updateLinks, 100);
-	});
-});
 </script>
 
 <template>
-	<div>
+	<UApp>
+		<NuxtLoadingIndicator color="var(--color-primary)" />
 		<DocsHeader />
-
 		<UMain>
 			<NuxtLayout>
 				<NuxtPage />
 			</NuxtLayout>
 		</UMain>
-
 		<DocsFooter />
-
-		<ClientOnly v-if="search.backend === 'nuxt'">
-			<LazyUContentSearch
-				ref="searchRef"
-				:files="files"
-				:navigation="navigation"
-				:fuse="{ resultLimit: 42 }"
-			/>
-		</ClientOnly>
-	</div>
+	</UApp>
 </template>

app/assets/css/algolia.css

@@ -1,28 +1,28 @@
 html.light {
-	--docsearch-primary-color: rgb(var(--color-primary-500));
+	--docsearch-primary-color: var(--color-primary-500);
 }
 
 html.dark[data-theme='dark'] {
-	--docsearch-primary-color: rgb(var(--color-primary-400));
+	--docsearch-primary-color: var(--color-primary-400);
 
 	--docsearch-text-color: rgb(245, 246, 247);
-	--docsearch-container-background: color-mix(in srgb, rgb(var(--color-gray-950)), transparent 20%);
-	--docsearch-modal-background: rgb(var(--color-gray-800));
+	--docsearch-container-background: color-mix(in srgb, var(--color-neutral-950), transparent 20%);
+	--docsearch-modal-background: var(--color-neutral-800);
 	--docsearch-modal-shadow: inset 1px 1px 0 0 var(--docsearch-footer-background),
-	0 3px 8px 0 rgb(var(--color-gray-950));
-	--docsearch-searchbox-background: rgb(var(--color-gray-800));
-	--docsearch-searchbox-focus-background: rgb(var(--color-gray-950));
+	0 3px 8px 0 rgb(var(--color-neutral-950));
+	--docsearch-searchbox-background: var(--color-neutral-800);
+	--docsearch-searchbox-focus-background: var(--color-neutral-950);
 	--docsearch-hit-color: rgb(190, 195, 201);
 	--docsearch-hit-shadow: none;
-	--docsearch-hit-background: color-mix(in srgb, rgb(var(--color-gray-700)) 30%, transparent);
-	--docsearch-key-gradient: rgb(var(--color-gray-900));
+	--docsearch-hit-background: color-mix(in srgb, var(--color-neutral-700) 30%, transparent);
+	--docsearch-key-gradient: var(--color-neutral-900);
 	--docsearch-key-shadow: transparent;
 	--docsearch-key-pressed-shadow: transparent;
-	--docsearch-footer-background: color-mix(in srgb, rgb(var(--color-gray-800)) 70%, rgb(var(--color-gray-900)));
-	--docsearch-footer-shadow: inset 0 1px 0 0 rgba(var(--color-gray-700), 0.5),
+	--docsearch-footer-background: color-mix(in srgb, rgb(var(--color-neutral-800)) 70%, rgb(var(--color-neutral-900)));
+	--docsearch-footer-shadow: inset 0 1px 0 0 rgba(var(--color-neutral-700), 0.5),
 	0 -4px 8px 0 rgba(0, 0, 0, 0.2);
 	--docsearch-logo-color: rgb(255, 255, 255);
-	--docsearch-muted-color: rgb(var(--color-gray-500));
+	--docsearch-muted-color: rgb(var(--color-neutral-500));
 }
 
 .DocSearch-Container {

app/assets/css/main.css

@@ -0,0 +1,58 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@source "../../../content/**/*";
+
+
+@theme static {
+	--font-sans: 'Inter Variable', sans-serif;
+	--font-display: 'Poppins', sans-serif;
+
+  --color-purple-50: #f3f2ff;
+  --color-purple-100: #e9e8ff;
+  --color-purple-200: #d6d4ff;
+  --color-purple-300: #b8b1ff;
+  --color-purple-400: #9585ff;
+  --color-purple-500: #6644ff;
+  --color-purple-600: #6030f7;
+  --color-purple-700: #531ee3;
+  --color-purple-800: #4418bf;
+  --color-purple-900: #39169c;
+  --color-purple-950: #210b6a;
+
+
+  --color-pink-50: #fef1fa;
+  --color-pink-100: #fee5f6;
+  --color-pink-200: #feccee;
+  --color-pink-300: #ff99dd;
+  --color-pink-400: #fe68c9;
+  --color-pink-500: #f83cb0;
+  --color-pink-600: #e81a8f;
+  --color-pink-700: #ca0c72;
+  --color-pink-800: #a70d5e;
+  --color-pink-900: #8b1050;
+  --color-pink-950: #55022d;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+
+html {
+	scroll-behavior: smooth;
+}

app/components/ApiEndpoint.vue

@@ -2,11 +2,11 @@
 import type {
 	OpenAPIObject,
 	RequestBodyObject,
-} from "openapi3-ts/oas30";
+} from 'openapi3-ts/oas30';
 import type {
 	DerefedOperationObject,
 	FlattenedOperationObject,
-} from "~/types";
+} from '~/types';
 
 const openapi = inject<OpenAPIObject>('openapi')!;
 
@@ -67,16 +67,16 @@ const responseBodyExample = computed(() => {
 <template>
 	<UPageBody
 		:key="operation.method + operation.path"
-		class="lg:flex gap-10 items-start border-b last:border-0 border-gray-200 dark:border-gray-800"
+		class="lg:flex gap-10 items-start border-b border-default last:border-0 w-full"
 		:ui="{
-			prose: 'prose prose-primary dark:prose-invert max-w-7xl',
+			prose: 'prose prose-primary dark:prose-invert',
 		}"
 		prose
 	>
 		<div class="grow shrink-0 basis-6/12">
 			<ProseH2
 				:id="slugify(operation.summary!)"
-				class="endpoint-title"
+				class="endpoint-title sticky pt-2 pb-2 top-16 bg-default/75 backdrop-blur z-10 w-full  border-b border-default -mx-2 px-2"
 			>
 				{{ operation.summary }}
 			</ProseH2>
@@ -86,25 +86,32 @@ const responseBodyExample = computed(() => {
 			</ProseP>
 
 			<div
-				v-if="operation.parameters"
+				v-if="operation.parameters && operation.parameters.length > 0"
 				class="mb-12 last:mb-0"
 			>
-				<ProseH4 :id="slugify(operation.summary!) + '-params'">
+				<ProseH4
+					:id="slugify(operation.summary!) + '-params'"
+				>
 					Query Parameters
 				</ProseH4>
-				<FieldGroup>
-					<Field
+				<ProseFieldGroup>
+					<ProseField
 						v-for="param of operation.parameters"
 						:key="param.name"
 						:name="param.name"
 						:type="param.schema?.type"
+						:ui="{
+							root: 'mb-0',
+							description: 'mt-2',
+						}"
+						class="[&_p]:my-0"
 					>
 						<MDC
 							v-if="param.description"
 							:value="param.description"
 						/>
-					</Field>
-				</FieldGroup>
+					</ProseField>
+				</ProseFieldGroup>
 			</div>
 
 			<div
@@ -120,21 +127,48 @@ const responseBodyExample = computed(() => {
 				<ApiParams :param="requestBodySchema" />
 			</div>
 
-			<div
-				v-for="responseBodyObject, code, index in responseBodyObjects"
-				:key="code"
-				class="mb-12 last:mb-0"
-			>
-				<ProseH4 :id="slugify(operation.summary!) + '-' + responseBodyObject.code + '-response'">
-					{{code}} Response
+			<div class="mb-12 last:mb-0">
+				<ProseH4 class="mt-12">
+					Responses
 				</ProseH4>
-				<ProseP v-if="responseBodyObject.description">
-					{{ responseBodyObject.description }}
-				</ProseP>
-				<ApiParams v-if="flattenedResponseBodySchemas[index]" :param="flattenedResponseBodySchemas[index]" />
+				<UTabs
+					variant="link"
+					:items="Object.keys(responseBodyObjects).map((code, index) => ({
+						label: code,
+						meta: responseBodyObjects[code],
+						index,
+					}))"
+					:unmount-on-hide="false"
+				>
+					<template #default="{ item }">
+						<UBadge
+							variant="soft"
+							size="lg"
+							class="font-mono"
+							color="neutral"
+						>
+							<UChip
+								standalone
+								inset
+								:color="item.label.toString().startsWith('2') ? 'success' : 'error'"
+							/>
+							{{ item.label }}
+						</UBadge>
+					</template>
+					<template
+						#content="{ item }"
+					>
+						<div>
+							{{ item.meta.description }}
+						</div>
+						<ApiParams
+							v-if="flattenedResponseBodySchemas[item.index]"
+							:param="flattenedResponseBodySchemas[item.index]"
+						/>
+					</template>
+				</UTabs>
 			</div>
 		</div>
-
 		<div class="grow sticky top-16 w-full">
 			<MDC
 				v-if="'x-codeSamples' in operation"