From 2cb4bd8a72dfe4dcb64aceffba0331b48717d46a Mon Sep 17 00:00:00 2001 From: Hugo Richard Date: Wed, 26 Feb 2025 19:00:45 +0100 Subject: [PATCH] docs(app): enable support for `@nuxt/ui-pro` with `vue` (#3191) Co-authored-by: Benjamin Canac Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Farnabaz --- .../app/components/content/ComponentTheme.vue | 22 ++++- docs/app/components/content/IconsTheme.vue | 30 +++++- docs/app/composables/useSharedData.ts | 2 - docs/content/1.getting-started/3.theme.md | 94 ++++++++++++++++++- .../1.getting-started/6.color-mode/2.vue.md | 24 +++++ docs/package.json | 2 +- pnpm-lock.yaml | 19 ++-- 7 files changed, 176 insertions(+), 17 deletions(-) diff --git a/docs/app/components/content/ComponentTheme.vue b/docs/app/components/content/ComponentTheme.vue index 24d4890c..07d0c16f 100644 --- a/docs/app/components/content/ComponentTheme.vue +++ b/docs/app/components/content/ComponentTheme.vue @@ -96,7 +96,7 @@ export default defineAppConfig(${json5.stringify(component.value, null, 2).repla :: -::code-collapse{class="vue-only"} +::code-collapse{class="vue-only ui-only"} \`\`\`ts [vite.config.ts] import { defineConfig } from 'vite' @@ -116,6 +116,26 @@ export default defineConfig({ :: +::code-collapse{class="vue-only ui-pro-only"} + +\`\`\`ts [vite.config.ts] +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import uiPro from '@nuxt/ui-pro/vite' + +export default defineConfig({ + plugins: [ + vue(), + uiPro(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1') + .split('\n') + .map((line, i) => i === 0 ? line : ` ${line}`) + .join('\n')}) + ] +}) +\`\`\` + +:: + ${strippedCompoundVariants.value ? ` ::callout{icon="i-simple-icons-github" to="${themeLink.value}" title="Compound variants"} diff --git a/docs/app/components/content/IconsTheme.vue b/docs/app/components/content/IconsTheme.vue index dd6d4abd..52c609e3 100644 --- a/docs/app/components/content/IconsTheme.vue +++ b/docs/app/components/content/IconsTheme.vue @@ -31,11 +31,7 @@ export default defineAppConfig(${json5.stringify({ :: -::caution{class="ui-pro-only vue-only"} -Nuxt UI Pro v3 does not support Vue yet. -:: - -::code-collapse{class="vue-only"} +::code-collapse{class="vue-only ui-only"} \`\`\`ts [vite.config.ts] import { defineConfig } from 'vite' @@ -57,6 +53,30 @@ export default defineConfig({ }) \`\`\` +:: + +::code-collapse{class="vue-only ui-pro-only"} + +\`\`\`ts [vite.config.ts] +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import uiPro from '@nuxt/ui-pro/vite' + +export default defineConfig({ + plugins: [ + vue(), + uiPro(${json5.stringify({ + ui: { + icons + } + }, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1') + .split('\n') + .map((line, i) => i === 0 ? line : ` ${line}`) + .join('\n')}) + ] +}) +\`\`\` + :: ` diff --git a/docs/app/composables/useSharedData.ts b/docs/app/composables/useSharedData.ts index a70408a2..e3ae46b9 100644 --- a/docs/app/composables/useSharedData.ts +++ b/docs/app/composables/useSharedData.ts @@ -9,7 +9,6 @@ export function useSharedData() { label: 'Vue', icon: 'i-simple-icons-vuedotjs', value: 'vue', - disabled: module.value === 'ui-pro', onSelect: () => { if (module.value === 'ui-pro') { return @@ -29,7 +28,6 @@ export function useSharedData() { label: 'UI Pro', icon: 'i-lucide-panels-top-left', value: 'ui-pro', - disabled: framework.value === 'vue', onSelect: () => { if (framework.value === 'vue') { return diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md index 71952ba1..b683a8ca 100644 --- a/docs/content/1.getting-started/3.theme.md +++ b/docs/content/1.getting-started/3.theme.md @@ -159,7 +159,9 @@ export default defineAppConfig({ :: #vue -::div +::module-only +#ui +:::div You can configure these color aliases at runtime in your `vite.config.ts` file under the `ui.colors` key: ```ts [vite.config.ts] @@ -181,6 +183,31 @@ export default defineConfig({ ] }) ``` +::: + +#ui-pro +:::div +You can configure these color aliases at runtime in your `vite.config.ts` file under the `uiPro.colors` key: +```ts [vite.config.ts] +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import uiPro from '@nuxt/ui-pro/vite' + +export default defineConfig({ + plugins: [ + vue(), + uiPro({ + ui: { + colors: { + primary: 'blue', + neutral: 'zinc' + } + } + }) + ] +}) +``` +::: :: @@ -229,6 +256,8 @@ export default defineNuxtConfig({ ::: #vue +::module-only +#ui :::tip You can add you own dynamic color aliases in your `vite.config.ts`, you just have to make sure to also define them in the [`theme.colors`](/getting-started/installation/vue#themecolors) option of the `ui` plugin. @@ -255,6 +284,36 @@ export default defineConfig({ ``` ::: + +#ui-pro +:::tip +You can add you own dynamic color aliases in your `vite.config.ts`, you just have to make sure to also define them in the [`theme.colors`](/getting-started/installation/vue#themecolors) option of the `uiPro` plugin. + +```ts [vite.config.ts] +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import uiPro from '@nuxt/ui-pro/vite' + +export default defineConfig({ + plugins: [ + vue(), + uiPro({ + ui: { + colors: { + tertiary: 'indigo' + }, + }, + theme: { + colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error'] + } + }) + ] +}) +``` + +::: + +:: :: ### Tokens @@ -788,7 +847,10 @@ export default defineAppConfig({ :: #vue -::div + +::module-only +#ui +:::div You can override the theme of components globally inside your `vite.config.ts` by using the exact same structure as the theme object. Let's say you want to change the font weight of all your buttons, you can do it like this: @@ -813,7 +875,35 @@ export default defineConfig({ ] }) ``` +::: +#ui-pro +:::div +You can override the theme of components globally inside your `vite.config.ts` by using the exact same structure as the theme object. + +Let's say you want to change the font weight of all your buttons, you can do it like this: + +```ts [vite.config.ts] +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import uiPro from '@nuxt/ui-pro/vite' + +export default defineConfig({ + plugins: [ + vue(), + uiPro({ + ui: { + button: { + slots: { + base: 'font-bold' + } + } + } + }) + ] +}) +``` +::: :: :: diff --git a/docs/content/1.getting-started/6.color-mode/2.vue.md b/docs/content/1.getting-started/6.color-mode/2.vue.md index 6c0c1ca8..e669c12d 100644 --- a/docs/content/1.getting-started/6.color-mode/2.vue.md +++ b/docs/content/1.getting-started/6.color-mode/2.vue.md @@ -32,6 +32,9 @@ const mode = useColorMode() You can disable this plugin with the `colorMode` option in your `vite.config.ts`: +::module-only +#ui +:::div ```ts [vite.config.ts] import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' @@ -46,3 +49,24 @@ export default defineConfig({ ] }) ``` + +::: + +#ui-pro +:::div +```ts [vite.config.ts] +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import uiPro from '@nuxt/ui-pro/vite' + +export default defineConfig({ + plugins: [ + vue(), + uiPro({ + colorMode: false + }) + ] +}) +``` +::: +:: diff --git a/docs/package.json b/docs/package.json index a7354325..a6ff36fb 100644 --- a/docs/package.json +++ b/docs/package.json @@ -10,7 +10,7 @@ "@nuxt/content": "^3.2.2", "@nuxt/image": "^1.9.0", "@nuxt/ui": "latest", - "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@2b867b3", + "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@c02527f", "@nuxthub/core": "^0.8.17", "@nuxtjs/plausible": "^1.2.0", "@octokit/rest": "^21.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ff3f8ac2..76d8fef2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -268,8 +268,8 @@ importers: specifier: workspace:* version: link:.. '@nuxt/ui-pro': - specifier: https://pkg.pr.new/@nuxt/ui-pro@2b867b3 - version: https://pkg.pr.new/@nuxt/ui-pro@2b867b3(magicast@0.3.5)(rollup@4.32.1)(typescript@5.6.3) + specifier: https://pkg.pr.new/@nuxt/ui-pro@c02527f + version: https://pkg.pr.new/@nuxt/ui-pro@c02527f(@babel/parser@7.26.9)(magicast@0.3.5)(rollup@4.32.1)(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3)) '@nuxthub/core': specifier: ^0.8.17 version: 0.8.17(db0@0.2.4(better-sqlite3@11.8.1))(ioredis@5.5.0)(magicast@0.3.5)(rollup@4.32.1)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0)) @@ -1735,8 +1735,8 @@ packages: vitest: optional: true - '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@2b867b3': - resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@2b867b3} + '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@c02527f': + resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@c02527f} version: 3.0.0-alpha.13 peerDependencies: typescript: 5.6.3 @@ -8681,7 +8681,7 @@ snapshots: - typescript - yaml - '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@2b867b3(magicast@0.3.5)(rollup@4.32.1)(typescript@5.6.3)': + '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@c02527f(@babel/parser@7.26.9)(magicast@0.3.5)(rollup@4.32.1)(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))': dependencies: '@nuxt/kit': 3.15.4(magicast@0.3.5)(rollup@4.32.1) '@nuxt/schema': 3.15.4 @@ -8689,17 +8689,24 @@ snapshots: '@vueuse/core': 12.7.0(typescript@5.6.3) consola: 3.4.0 defu: 6.1.4 + dotenv: 16.4.7 git-url-parse: 16.0.1 ofetch: 1.4.1 parse-git-config: 3.0.0 + pathe: 2.0.3 pkg-types: 1.3.1 scule: 1.3.0 + tinyglobby: 0.2.12 typescript: 5.6.3 - vue-component-type-helpers: 2.2.4 + unplugin: 2.2.0 + unplugin-auto-import: 19.1.0(@nuxt/kit@3.15.4(magicast@0.3.5)(rollup@4.32.1))(@vueuse/core@12.7.0(typescript@5.6.3))(rollup@4.32.1) + unplugin-vue-components: 28.4.0(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5)(rollup@4.32.1))(vue@3.5.13(typescript@5.6.3)) transitivePeerDependencies: + - '@babel/parser' - magicast - rollup - supports-color + - vue '@nuxt/vite-builder@3.15.4(@types/node@22.13.5)(eslint@9.21.0(jiti@2.4.2))(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.32.1)(terser@5.39.0)(typescript@5.6.3)(vue-tsc@2.2.0(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3))(yaml@2.7.0)': dependencies: