feat: import @nuxt/ui-pro components (#4675)

Co-authored-by: Hugo Richard <[email protected]>

Author: benjamincanac

.github/workflows/module.yml

@@ -205,58 +205,3 @@ jobs:
 
       - name: Build
         run: pnpm run build
-
-  nuxt-ui-pro:
-    needs: build
-
-    # Only run this job if not a fork PR (when push event or PR from same repo)
-    if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository
-
-    runs-on: ${{ matrix.os }}
-
-    permissions:
-      contents: read
-      pull-requests: read
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest] # macos-latest, windows-latest
-        node: [22]
-
-    env:
-      NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }}
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v5
-        with:
-          repository: nuxt/ui-pro
-          token: ${{ secrets.NUXT_GITHUB_TOKEN }}
-
-      - name: Store commit SHA
-        run: |
-          echo "COMMIT_SHA=$(echo ${{ github.event.pull_request.head.sha || github.sha }} | cut -c1-7)" >> $GITHUB_ENV
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Install node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          cache: pnpm
-
-      - name: Install latest nuxt/ui
-        run: pnpm install https://pkg.pr.new/@nuxt/ui@${{ env.COMMIT_SHA }} --lockfile-only
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Prepare
-        run: pnpm run dev:prepare
-
-      - name: Typecheck
-        run: pnpm run typecheck
-
-      - name: Build
-        run: pnpm run build

.nuxtrc

@@ -1 +1,2 @@
 experimental.normalizeComponentNames=false
+modules[]=@nuxt/content

README.md

@@ -16,10 +16,6 @@ Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Ta
 > [!NOTE]
 > You are on the `v4` development branch, check out the [v2 branch](https://github.com/nuxt/ui/tree/v2) for Nuxt UI v2.
 
-> [!TIP]
-> **Looking for more components ?**
-> Check out [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium Vue components, composables, and utilities built on top of Nuxt UI for faster and more powerful app development.
-
 ## Documentation
 
 Visit https://ui.nuxt.com to explore the documentation.
@@ -59,7 +55,7 @@ export default defineNuxtConfig({
 @import "@nuxt/ui";
 ```
 
-Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/nuxt).
+Learn more in the [installation guide](https://ui.nuxt.com/docs/getting-started/installation/nuxt).
 
 ### Vue
 
@@ -106,18 +102,18 @@ app.mount('#app')
 @import "@nuxt/ui";
 ```
 
-Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/vue).
+Learn more in the [installation guide](https://ui.nuxt.com/docs/getting-started/installation/vue).
 
 ## Contribution
 
 Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:
 
 - Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
-- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/getting-started/contribution) to share your suggestions.
+- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/docs/getting-started/contribution) to share your suggestions.
 
 ## Local Development
 
-Follow the docs to [set up your local development environment](https://ui.nuxt.com/getting-started/contribution#local-development) and contribute.
+Follow the docs to [set up your local development environment](https://ui.nuxt.com/docs/getting-started/contribution#local-development) and contribute.
 
 ## Credits
 

cli/commands/make/component.mjs

@@ -21,17 +21,13 @@ export default defineCommand({
       type: 'boolean',
       description: 'Create a primitive component.'
     },
-    pro: {
-      type: 'boolean',
-      description: 'Create a pro component.'
-    },
     prose: {
       type: 'boolean',
-      description: 'Create a prose component (with --pro).'
+      description: 'Create a prose component.'
     },
     content: {
       type: 'boolean',
-      description: 'Create a content component (with --pro).'
+      description: 'Create a content component.'
     },
     template: {
       type: 'string',
@@ -45,15 +41,6 @@ export default defineCommand({
       process.exit(1)
     }
 
-    if (args.prose && !args.pro) {
-      consola.error('`--prose` flag can only be used with `--pro` flag!')
-      process.exit(1)
-    }
-    if (args.content && !args.pro) {
-      consola.error('`--content` flag can only be used with `--pro` flag!')
-      process.exit(1)
-    }
-
     const path = resolve('.')
 
     for (const template of Object.keys(templates)) {

cli/templates.mjs

@@ -1,14 +1,12 @@
 import { splitByCase, upperFirst, camelCase, kebabCase } from 'scule'
 
-const playground = ({ name, pro }) => {
+const playground = ({ name }) => {
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
   const kebabName = kebabCase(name)
 
   return {
     filename: `playgrounds/nuxt/app/pages/components/${kebabName}.vue`,
-    contents: pro
-      ? undefined
-      : `
+    contents: `
 <template>
   <div>
     <U${upperName} />
@@ -18,24 +16,21 @@ const playground = ({ name, pro }) => {
   }
 }
 
-const component = ({ name, primitive, pro, prose, content }) => {
+const component = ({ name, primitive, prose, content }) => {
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
   const camelName = camelCase(name)
   const kebabName = kebabCase(name)
-  const key = pro ? 'uiPro' : 'ui'
-  const path = pro ? 'ui-pro' : 'ui'
 
   return {
     filename: `src/runtime/components/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${upperName}.vue`,
     contents: primitive
       ? `
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
-${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
-import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
+import theme from '#build/ui/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
+import type { ComponentConfig } from '../types/tv'
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'>
 
 export interface ${upperName}Props {
   /**
@@ -63,7 +58,7 @@ defineSlots<${upperName}Slots>()
 
 const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -76,11 +71,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro'
 <script lang="ts">
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
-${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
-import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
+import theme from '#build/ui/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
+import type { ComponentConfig } from '../types/tv'
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'>
 
 export interface ${upperName}Props extends Pick<${upperName}RootProps> {
   class?: any
@@ -107,7 +101,7 @@ const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
 const rootProps = useForwardPropsEmits(reactivePick(props), emits)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -168,18 +162,15 @@ describe('${upperName}', () => {
   }
 }
 
-const docs = ({ name, pro, primitive }) => {
+const docs = ({ name, primitive }) => {
   const kebabName = kebabCase(name)
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
 
   return {
     filename: `docs/content/3.components/${kebabName}.md`,
     contents: `---
 title: ${upperName}
-description: ''${pro
-  ? `
-module: ui-pro`
-  : ''}
+description: ''
 links:${primitive
   ? ''
   : `
@@ -188,7 +179,7 @@ links:${primitive
     to: https://reka-ui.com/docs/components/${kebabName}`}
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/nuxt/${pro ? 'ui-pro' : 'ui'}/tree/v4/src/runtime/components/${upperName}.vue
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/${upperName}.vue
 navigation.badge: Soon
 ---
 
@@ -200,19 +191,19 @@ navigation.badge: Soon
 
 ### Props
 
-:component-props${pro ? '{pro}' : ''}
+:component-props
 
 ### Slots
 
-:component-slots${pro ? '{pro}' : ''}
+:component-slots
 
 ### Emits
 
-:component-emits${pro ? '{pro}' : ''}
+:component-emits
 
 ## Theme
 
-:component-theme${pro ? '{pro}' : ''}
+:component-theme
 
 ## Changelog
 

docs/.env.example

@@ -1,7 +1,3 @@
-# Specify the path of @nuxt/ui-pro locally
-NUXT_UI_PRO_PATH=
-# 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

docs/app/app.vue

@@ -6,12 +6,12 @@ const route = useRoute()
 const appConfig = useAppConfig()
 const colorMode = useColorMode()
 
-const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content', ['framework', 'module']))
-const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('content'), {
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs', ['framework', 'category']))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
   server: false
 })
 
-const links = useLinks()
+const links = useHeaderLinks()
 const searchLinks = useSearchLinks()
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
@@ -42,7 +42,7 @@ useServerSeoMeta({
 
 useFaviconFromTheme()
 
-const { frameworks, modules } = useSharedData()
+const { frameworks } = useSharedData()
 const { mappedNavigation, filteredNavigation } = useContentNavigation(navigation)
 
 provide('navigation', mappedNavigation)
@@ -52,40 +52,44 @@ provide('navigation', mappedNavigation)
   <UApp :toaster="appConfig.toaster">
     <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
 
-    <template v-if="!route.path.startsWith('/examples')">
-      <Banner />
-
-      <Header :links="links" />
-    </template>
-
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-
-    <template v-if="!route.path.startsWith('/examples')">
-      <Footer />
-
-      <ClientOnly>
-        <LazyUContentSearch
-          :links="searchLinks"
-          :files="files"
-          :groups="[{
-            id: 'framework',
-            label: 'Framework',
-            items: frameworks
-          }, {
-            id: 'module',
-            label: 'Module',
-            items: modules
-          }]"
-          :navigation="filteredNavigation"
-          :fuse="{ resultLimit: 100 }"
-        />
-      </ClientOnly>
-    </template>
+    <div :class="[route.path.startsWith('/docs/') && 'root']">
+      <template v-if="!route.path.startsWith('/examples')">
+        <Banner />
+
+        <Header :links="links" />
+      </template>
+
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+
+      <template v-if="!route.path.startsWith('/examples')">
+        <Footer />
+
+        <ClientOnly>
+          <LazyUContentSearch
+            :links="searchLinks"
+            :files="files"
+            :groups="[{
+              id: 'framework',
+              label: 'Framework',
+              items: frameworks
+            }]"
+            :navigation="filteredNavigation"
+            :fuse="{ resultLimit: 120 }"
+          />
+        </ClientOnly>
+      </template>
+    </div>
   </UApp>
 </template>
 
 <style>
 /* Safelist (do not remove): [&>div]:*:my-0 [&>div]:*:w-full h-64 !px-0 !py-0 !pt-0 !pb-0 !p-0 !justify-start !justify-end !min-h-96 h-136 max-h-[341px] */
+
+@media (min-width: 1024px) {
+  .root {
+    --ui-header-height: 113px;
+  }
+}
 </style>