Update deps and migrate to nuxt and nuxt ui v4

app/assets/css/main.css

@@ -1,5 +1,5 @@
 @import "tailwindcss";
-@import "@nuxt/ui-pro";
+@import "@nuxt/ui";
 
 @source "../../../content/**/*";
 

app/components/CopyDocButton.vue

@@ -71,32 +71,17 @@ async function copyPage() {
 
 <template>
 	<UButtonGroup>
-		<UButton
-			color="neutral"
-			variant="outline"
-			leading-icon="material-symbols:content-copy-outline"
-			:label="isCopied ? 'Copied!' : 'Copy page'"
-			@click="copyPage"
-		/>
+		<UButton color="neutral" variant="outline" leading-icon="material-symbols:content-copy-outline"
+			:label="isCopied ? 'Copied!' : 'Copy page'" @click="copyPage" />
 
-		<UDropdownMenu
-			:items="items"
-			:content="{ side: 'bottom', align: 'end' }"
-		>
-			<UButton
-				color="neutral"
-				variant="outline"
-				icon="material-symbols:keyboard-arrow-down"
-			/>
+		<UDropdownMenu :items="items" :content="{ side: 'bottom', align: 'end' }">
+			<UButton color="neutral" variant="outline" icon="material-symbols:keyboard-arrow-down" />
 			<template #item="{ item }">
 				<div class="flex gap-2 text-left">
-					<UIcon
-						:name="item.icon"
-						class="text-lg"
-					/>
+					<UIcon :name="item.icon" class="text-lg" />
 					<div>
 						<p>{{ item.label }}</p>
-						<p class="text-xs text-muted">
+						<p class="text-xs text-muted">nullify
 							{{ item.description }}
 						</p>
 					</div>
@@ -106,6 +91,4 @@ async function copyPage() {
 	</UButtonGroup>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

app/pages/[...slug].vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ContentNavigationItem } from '@nuxt/content';
-
-import { findPageHeadline } from '#ui-pro/utils';
+import { findPageHeadline } from '@nuxt/content/utils';
 
 const navigation = inject('navigation') as Ref<ContentNavigationItem[]>;
 
@@ -16,7 +15,7 @@ if (!page.value) {
 	throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
 }
 
-const headline = computed(() => findPageHeadline(navigation.value, page.value));
+const headline = computed(() => findPageHeadline(navigation.value, page.value?.path));
 
 const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryCollectionItemSurroundings('content',
 	route.path,
@@ -28,25 +27,15 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => qu
 
 <template>
 	<UPage>
-		<UPageHeader
-			:title="page!.title ?? ''"
-			:description="page!.description ?? ''"
-			:headline="headline"
-			:ui="{ headline: 'headline', title: 'title' }"
-		>
+		<UPageHeader :title="page!.title ?? ''" :description="page!.description ?? ''" :headline="headline"
+			:ui="{ headline: 'headline', title: 'title' }">
 			<template #links>
 				<CopyDocButton :page="page!" />
 			</template>
 		</UPageHeader>
 
-		<UPageBody
-			class="content"
-			prose
-		>
-			<ContentRenderer
-				v-if="page"
-				:value="page"
-			/>
+		<UPageBody class="content" prose>
+			<ContentRenderer v-if="page" :value="page" />
 
 			<USeparator v-if="surround?.length" />
 
@@ -55,15 +44,8 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => qu
 			<UContentSurround :surround="surround" />
 		</UPageBody>
 
-		<template
-			v-if="page!.body?.toc?.links?.length"
-			#right
-		>
-			<DocsToc
-				:links="page!.body?.toc?.links"
-				:authors="page!.authors"
-				:file="page!.id!"
-			/>
+		<template v-if="page!.body?.toc?.links?.length" #right>
+			<DocsToc :links="page!.body?.toc?.links" :authors="page!.authors" :file="page!.id!" />
 		</template>
 	</UPage>
 </template>

app/pages/tutorials/[category]/[...slug].vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ContentCollectionItem, ContentNavigationItem } from '@nuxt/content';
-import { findPageBreadcrumb, mapContentNavigation } from '#ui-pro/utils';
+import { findPageBreadcrumb } from '@nuxt/content/utils';
 
 const navigation = inject('navigation') as Ref<ContentNavigationItem[]>;
 
@@ -23,58 +23,35 @@ const imageSrc = (page: ContentCollectionItem | undefined) => {
 	return `/docs/api/tutorialimg?logos=${techString}`;
 };
 
-const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation.value, page.value)).map(({ icon, ...link }) => link));
+const breadcrumb = computed(() => findPageBreadcrumb(navigation.value, page.value?.path).map(i => ({ label: i.title, to: i.path })) || []);
+
+console.log(breadcrumb.value);
 </script>
 
 <template>
 	<UPage>
-		<UPageHeader
-			:title="page!.title"
-			:ui="{ title: 'title', headline: 'headline' }"
-			:description="page!.description"
-		>
+		<UPageHeader :title="page!.title" :ui="{ title: 'title', headline: 'headline' }"
+			:description="page!.description">
 			<template #headline>
-				<UBreadcrumb
-					:items="breadcrumb"
-				>
+				<UBreadcrumb :items="breadcrumb">
 					<template #separator>
 						<span class="mx-2 text-muted">/</span>
 					</template>
 				</UBreadcrumb>
 			</template>
 
-			<template
-				v-if="page"
-				#links
-			>
+			<template v-if="page" #links>
 				<CopyDocButton :page="page" />
 			</template>
-			<img
-				v-if="page"
-				:src="imageSrc(page)"
-				alt="Generated Image"
-			>
+			<img v-if="page" :src="imageSrc(page)" alt="Generated Image">
 		</UPageHeader>
 
-		<UPageBody
-			class="content"
-			prose
-		>
-			<ContentRenderer
-				v-if="page"
-				:value="page"
-			/>
+		<UPageBody class="content" prose>
+			<ContentRenderer v-if="page" :value="page" />
 		</UPageBody>
 
-		<template
-			v-if="page!.body?.toc?.links?.length"
-			#right
-		>
-			<DocsToc
-				:links="page!.body?.toc?.links"
-				:authors="page!.authors"
-				:file="page!.id!"
-			/>
+		<template v-if="page!.body?.toc?.links?.length" #right>
+			<DocsToc :links="page!.body?.toc?.links" :authors="page!.authors" :file="page!.id!" />
 		</template>
 	</UPage>
 </template>

nuxt.config.ts

@@ -3,7 +3,7 @@ export default defineNuxtConfig({
 
 	modules: [
 		'@nuxt/eslint',
-		'@nuxt/ui-pro',
+		'@nuxt/ui',
 		'@nuxt/content',
 		'@nuxt/scripts',
 		'@nuxtjs/seo',

package.json

@@ -11,33 +11,34 @@
 	},
 	"dependencies": {
 		"@directus/openapi": "0.2.2",
+		"@directus/sdk": "^20.1.0",
 		"@docsearch/css": "3.9.0",
 		"@docsearch/js": "3.9.0",
-		"@directus/sdk": "^19.1.0",
 		"@iconify-json/heroicons-outline": "1.2.1",
-		"@iconify-json/material-symbols": "1.2.25",
-		"@iconify-json/simple-icons": "1.2.38",
-		"@nuxt/content": "3.5.1",
-		"@nuxt/ui-pro": "3.3.3",
+		"@iconify-json/material-symbols": "1.2.41",
+		"@iconify-json/simple-icons": "1.2.54",
+		"@nuxt/content": "3.7.1",
+		"@nuxt/ui": "^4.0.1",
 		"@nuxtjs/algolia": "1.11.2",
 		"@nuxtjs/color-mode": "3.5.2",
 		"@nuxtjs/seo": "3.0.3",
 		"@vueuse/core": "13.3.0",
 		"@vueuse/nuxt": "13.3.0",
+		"better-sqlite3": "^12.4.1",
 		"lodash-es": "4.17.21",
-		"nuxt": "3.17.5",
-		"openapi3-ts": "4.4.0",
-		"sharp": "^0.34.2",
-		"ufo": "1.6.1",
-		"posthog-js": "1.260.1",
-		"posthog-node": "5.7.0"
+		"nuxt": "4.1.3",
+		"openapi3-ts": "4.5.0",
+		"posthog-js": "1.274.3",
+		"posthog-node": "5.9.5",
+		"sharp": "^0.34.4",
+		"ufo": "1.6.1"
 	},
 	"devDependencies": {
 		"@nuxt/eslint": "1.4.1",
 		"@nuxt/scripts": "0.11.8",
 		"@types/lodash-es": "4.17.12",
-		"typescript": "5.8.3",
-		"vue-tsc": "^2.2.10"
+		"typescript": "5.9.2",
+		"vue-tsc": "^3.1.1"
 	},
 	"pnpm": {
 		"overrides": {
@@ -46,4 +47,4 @@
 		}
 	},
 	"packageManager": "[email protected]+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
-}
+}