docs: improve responsiveness

[vachmara]

🔗 Linked issue

Resolves #504

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This pull request upgrades the documentation site from @nuxt/ui-pro to the new @nuxt/ui v4 alpha and updates related dependencies and code to match the new UI library. It also refactors several components to use updated UI primitives and navigation logic, and synchronizes the lockfile with new package versions.

UI Library Migration

• Migrated from @nuxt/ui-pro to @nuxt/ui@4.0.0-alpha.2 across the codebase (docs/package.json, docs/nuxt.config.ts, docs/app/assets/css/main.css, pnpm-lock.yaml).

Component Refactoring for New UI

• Refactored Header.vue to use the new navigation injection, route-based navigation logic, and UNavigationMenu/UContentNavigation components for improved navigation structure.
• Updated docs.vue layout to use new container and page primitives (UMain, UContainer, UPage, UPageAside) and moved navigation logic to match new UI conventions.
• Replaced UButtonGroup with UFieldGroup in index.vue to align with new component naming and usage.

These changes collectively modernize the documentation site to use the latest Nuxt UI library and ecosystem, improving maintainability and aligning with current best practices.

[vercel]

@vachmara is attempting to deploy a commit to the Nuxt Team on Vercel.

A member of the Team first needs to authorize it.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/nuxt/scripts/@nuxt/scripts@505

commit: ae3dc04

[vercel]

Additional Comments:

docs/app/components/ContentSearch.vue (line 29):

The import from #ui-pro/types will fail since @nuxt/ui-pro was removed from dependencies in this migration to @nuxt/ui v4.

View Details

📝 Patch Details

diff --git a/docs/app/components/ContentSearch.vue b/docs/app/components/ContentSearch.vue
index c57ee8a..2829c7b 100644
--- a/docs/app/components/ContentSearch.vue
+++ b/docs/app/components/ContentSearch.vue
@@ -26,7 +26,14 @@ import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
 import type { ParsedContent, NavItem, MarkdownNode } from '@nuxt/content'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { Group, Command } from '#ui/types'
-import type { ContentSearchLink } from '#ui-pro/types'
+
+interface ContentSearchLink {
+  label?: string
+  to?: string
+  description?: string
+  icon?: string
+  children?: ContentSearchLink[]
+}
 
 defineOptions({
   inheritAttrs: false,

Analysis

Module resolution error in ContentSearch.vue after migration to @nuxt/ui v4

What fails: ContentSearch.vue imports ContentSearchLink type from #ui-pro/types which fails module resolution since @nuxt/ui-pro was removed

How to reproduce:

cd docs && pnpm exec tsc --noEmit import-test.ts
# where import-test.ts contains: import type { ContentSearchLink } from '#ui-pro/types'

Result: TypeScript error TS2307: Cannot find module '#ui-pro/types' or its corresponding type declarations.

Expected: Type should be available from the new @nuxt/ui v4 library or defined locally

Context: The migration from @nuxt/ui-pro to @nuxt/ui v4 removed the #ui-pro module alias, but the ContentSearchLink interface was not exported from the new unified library. Based on the migration guide, types should be replaced with @nuxt/ui equivalents.

[harlan-zw]

Amazing, thank you 😊