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,70 +1,27 @@
 <script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content';
 import { spec } from '@directus/openapi';
-import { useRoute } from 'vue-router';
-import { nextTick, watch } from 'vue';
 
-const route = useRoute();
-
-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)" />
+		<DocsBanner />
 		<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,67 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@source "../../../content/**/*";
+
+
+@theme static {
+	--font-sans: 'Inter', 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);
+  }
+}
+
+button,
+[role="button"] {
+	cursor: pointer;
+}
+
+:disabled {
+	cursor: default;
+}
+
+
+html {
+	scroll-behavior: smooth;
+}