docs: integrate @nuxt/ui-pro (nuxt#739)

Co-authored-by: Pooya Parsa <[email protected]>
Co-authored-by: Florent Delerue <[email protected]>
Co-authored-by: Sébastien Chopin <[email protected]>

Author: 4 people

.github/workflows/ci-dev.yml

@@ -21,6 +21,9 @@ jobs:
         os: [ubuntu-latest] # macos-latest, windows-latest
         node: [18]
 
+    env:
+      NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
+
     steps:
       - uses: actions/setup-node@v4
         with:

.github/workflows/ci.yml

@@ -14,6 +14,9 @@ jobs:
         os: [ubuntu-latest] # macos-latest, windows-latest
         node: [18]
 
+    env:
+      NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
+
     steps:
       - uses: actions/setup-node@v4
         with:

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "prettier.enable": false
+}

docs/.env.example

@@ -1,6 +1,8 @@
-# To link Nuxt UI Pro in development
+# Specify the path of @nuxt/ui-pro locally
 NUXT_UI_PRO_PATH=
-# To use Nuxt UI Pro in production
-NUXT_UI_PRO_TOKEN=
+# Production token for @nuxt/ui-pro, purchase on https://ui.nuxt.com/pro/purchase
+NUXT_UI_PRO_LICENSE=
 # Used when pre-rendering the docs for dynamic OG images
 NUXT_PUBLIC_SITE_URL=
+# Used to fetch `nuxt/ui-pro` docs content
+NUXT_GITHUB_TOKEN=

docs/app.vue

@@ -1,16 +1,16 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div>
-    <Header />
+    <Header v-if="!$route.path.startsWith('/examples')" :links="links" />
 
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
 
-    <Footer />
+    <Footer v-if="!$route.path.startsWith('/examples')" />
 
     <ClientOnly>
-      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" />
+      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" :links="links" />
     </ClientOnly>
 
     <UNotifications>
@@ -42,10 +42,17 @@ const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { defa
 // Computed
 
 const navigation = computed(() => {
-  const main = nav.value.filter(item => item._path !== '/dev')
-  const dev = nav.value.find(item => item._path === '/dev')?.children
+  if (branch.value?.name === 'dev') {
+    const dev = nav.value.find(item => item._path === '/dev')?.children
+    const pro = nav.value.find(item => item._path === '/pro')
+
+    return [
+      pro,
+      ...dev
+    ]
+  }
 
-  return branch.value?.name === 'dev' ? dev : main
+  return nav.value.filter(item => item._path !== '/dev')
 })
 
 const groups = computed(() => {
@@ -58,6 +65,54 @@ const groups = computed(() => {
 
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
+const links = computed(() => {
+  return [{
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open',
+    to: `${branch.value?.name === 'dev' ? '/dev' : ''}/getting-started`
+  }, {
+    label: 'Playground',
+    icon: 'i-simple-icons-stackblitz',
+    to: '/playground'
+  }, {
+    label: 'Roadmap',
+    icon: 'i-heroicons-academic-cap',
+    to: '/roadmap'
+  }, {
+    label: 'Pro',
+    icon: 'i-heroicons-square-3-stack-3d',
+    to: '/pro',
+    children: [{
+      label: 'Features',
+      to: '/pro#features',
+      exactHash: true,
+      icon: 'i-heroicons-beaker',
+      description: 'Discover all the features of Nuxt UI Pro.'
+    }, {
+      label: 'Pricing',
+      to: '/pro#pricing',
+      exactHash: true,
+      icon: 'i-heroicons-credit-card',
+      description: 'A simple pricing, for solo developers or teams.'
+    }, {
+      label: 'Guide',
+      to: '/pro/guide',
+      icon: 'i-heroicons-book-open',
+      description: 'Learn how to use Nuxt UI Pro in your app.'
+    }, {
+      label: 'Components',
+      to: '/pro/components',
+      icon: 'i-heroicons-cube-transparent',
+      description: 'Discover all the components available in Nuxt UI Pro.'
+    }]
+  }, {
+    label: 'Releases',
+    icon: 'i-heroicons-rocket-launch',
+    to: 'https://github.com/nuxt/ui/releases',
+    target: '_blank'
+  }]
+})
+
 // Watch
 
 watch(() => searchRef.value?.commandPaletteRef?.query, debounce((query: string) => {

docs/components/Footer.vue

@@ -1,22 +1,16 @@
 <template>
-  <div v-if="$route.path !== '/playground'" class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
-    <div class="bg-white dark:bg-gray-900 px-4">
+  <div class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
+    <div v-if="!['/playground', '/roadmap'].includes($route.path)" class="bg-white dark:bg-gray-900 px-4">
       <LogoOnly class="w-5 h-5" />
     </div>
   </div>
 
-  <UFooter :links="[]" :ui="{ bottom: { container: 'lg:py-4' } }">
+  <UFooter>
     <template #left>
-      <div class="text-sm text-gray-500 dark:text-gray-400">
-        Made by
-        <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs" class="inline-block">
-          <LogoLabs class="text-gray-900 dark:text-white h-4 w-auto" />
-        </NuxtLink>
-      </div>
-    </template>
-
-    <template #center>
-      <span class="text-sm text-gray-500 dark:text-gray-400">
+      <a v-if="$route.path.startsWith('/pro')" class="text-sm text-gray-500 dark:text-gray-400 hover:underline" href="https://ui.nuxt.com/pro/purchase" target="_blank">
+        Purchase Nuxt UI Pro
+      </a>
+      <span v-else class="text-sm text-gray-500 dark:text-gray-400">
         Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
           MIT License
         </NuxtLink>

docs/components/Header.vue

@@ -31,42 +31,35 @@
     </template>
 
     <template #panel>
-      <BranchSelect />
+      <UAsideLinks :links="links" />
 
-      <UNavigationTree :links="mapContentNavigation(navigation)" />
+      <UDivider type="dashed" class="mt-4 mb-3" />
+
+      <BranchSelect v-if="!route.path.startsWith('/pro')" />
+
+      <UNavigationTree :links="mapContentNavigation(navigation)" :multiple="false" default-open />
     </template>
   </UHeader>
 </template>
 
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
+import type { Link } from '#ui-pro/types'
 
+defineProps<{
+  links: Link[]
+}>()
+
+const route = useRoute()
 const { metaSymbol } = useShortcuts()
 
-const navigation = inject<Ref<NavItem[]>>('navigation')
+const nav = inject<Ref<NavItem[]>>('navigation')
+
+const navigation = computed(() => {
+  if (route.path.startsWith('/pro')) {
+    return nav.value.find(item => item._path === '/pro')?.children
+  }
 
-const links = computed(() => {
-  return [{
-    label: 'Documentation',
-    icon: 'i-heroicons-book-open-solid',
-    to: '/getting-started'
-  }, {
-    label: 'Examples',
-    icon: 'i-heroicons-square-3-stack-3d',
-    to: '/getting-started/examples'
-  }, {
-    label: 'Playground',
-    icon: 'i-simple-icons-stackblitz',
-    to: '/playground'
-  }, {
-    label: 'Pro',
-    icon: 'i-heroicons-square-3-stack-3d',
-    to: '/pro'
-  }, {
-    label: 'Releases',
-    icon: 'i-heroicons-rocket-launch-solid',
-    to: 'https://github.com/nuxt/ui/releases',
-    target: '_blank'
-  }]
+  return nav.value.filter(item => !item._path.startsWith('/pro'))
 })
 </script>

docs/components/content/ComponentCard.vue

@@ -36,8 +36,8 @@
       </div>
     </div>
 
-    <div class="flex border border-b-0 border-gray-200 dark:border-gray-700 relative not-prose" :class="[{ 'p-4': padding }, propsToSelect.length ? 'border-t-0' : 'rounded-t-md', backgroundClass, overflowClass]">
-      <component :is="name" v-model="vModel" v-bind="fullProps">
+    <div class="flex border border-b-0 border-gray-200 dark:border-gray-700 relative not-prose" :class="[{ 'p-4': padding }, propsToSelect.length ? 'border-t-0' : 'rounded-t-md', backgroundClass, extraClass]">
+      <component :is="name" v-model="vModel" v-bind="fullProps" :class="componentClass">
         <ContentSlot v-if="$slots.default" :use="$slots.default" />
 
         <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
@@ -99,13 +99,17 @@ const props = defineProps({
     type: String,
     default: 'bg-white dark:bg-gray-900'
   },
-  overflowClass: {
+  extraClass: {
     type: String,
     default: ''
   },
   previewOnly: {
     type: Boolean,
     default: false
+  },
+  componentClass: {
+    type: String,
+    default: ''
   }
 })
 
@@ -116,10 +120,16 @@ const componentProps = reactive({ ...props.props })
 const { $prettier } = useNuxtApp()
 const appConfig = useAppConfig()
 const route = useRoute()
-// eslint-disable-next-line vue/no-dupe-keys
-const slug = props.slug || route.params.slug[route.params.slug.length - 1]
-const camelName = camelCase(slug)
-const name = `U${upperFirst(camelName)}`
+
+let name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
+
+// TODO: Remove once merged on `main` branch
+if (['AvatarGroup', 'ButtonGroup', 'MeterGroup'].includes(name)) {
+  name = `U${name}`
+}
+if (['avatar-group', 'button-group', 'radio'].includes(name)) {
+  name = `U${upperFirst(camelCase(name))}`
+}
 
 const meta = await fetchComponentMeta(name)
 

docs/components/content/ComponentExample.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0">
     <div
-      class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md"
-      :class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode }, backgroundClass, overflowClass]"
+      class="flex border border-gray-200 dark:border-gray-700 relative rounded-t-md"
+      :class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode, 'not-prose': !prose }, backgroundClass, extraClass]"
     >
-      <component :is="camelName" v-if="component" v-bind="componentProps" />
+      <template v-if="component">
+        <iframe v-if="iframe" :src="`/examples/${component}`" v-bind="iframeProps" :class="backgroundClass" class="w-full" />
+        <component :is="camelName" v-else v-bind="componentProps" :class="componentClass" />
+      </template>
+
       <ContentSlot v-if="$slots.default" :use="$slots.default" />
     </div>
     <template v-if="hasCode">
@@ -43,18 +47,36 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  prose: {
+    type: Boolean,
+    default: false
+  },
+  iframe: {
+    type: Boolean,
+    default: false
+  },
+  iframeProps: {
+    type: Object,
+    default: () => ({})
+  },
   backgroundClass: {
     type: String,
     default: 'bg-white dark:bg-gray-900'
   },
-  overflowClass: {
+  extraClass: {
     type: String,
     default: ''
   }
 })
 
+let component = props.component
+// TODO: Remove once merged on `main` branch
+if (['command-palette-theme-algolia', 'command-palette-theme-raycast', 'vertical-navigation-theme-tailwind', 'pagination-theme-rounded'].includes(component)) {
+  component = component.replace('-theme', '-example-theme')
+}
+
 const instance = getCurrentInstance()
-const camelName = camelCase(props.component)
+const camelName = camelCase(component)
 const data = await fetchContentExampleCode(camelName)
 
 const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))

docs/components/content/ComponentProps.vue

@@ -17,10 +17,16 @@ const props = defineProps({
 })
 
 const route = useRoute()
-// eslint-disable-next-line vue/no-dupe-keys
-const slug = props.slug || route.params.slug[route.params.slug.length - 1]
-const camelName = camelCase(slug)
-const name = `U${upperFirst(camelName)}`
+
+let name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
+
+// TODO: Remove once merged on `main` branch
+if (['AvatarGroup', 'ButtonGroup', 'MeterGroup'].includes(name)) {
+  name = `U${name}`
+}
+if (['avatar-group', 'button-group', 'radio'].includes(name)) {
+  name = `U${upperFirst(camelCase(name))}`
+}
 
 const meta = await fetchComponentMeta(name)
 </script>