arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(app): enable support for @nuxt/ui-pro with vue (#3191)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Farnabaz <farnabaz@gmail.com>
This commit is contained in:
Hugo Richard
2025-02-26 19:00:45 +01:00
committed by GitHub
parent b53f77b304
commit 2cb4bd8a72
7 changed files with 176 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/app/components/content/ComponentTheme.vue
View File

@@ -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"}

30
docs/app/components/content/IconsTheme.vue
View File

@@ -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')})
]
})
\`\`\`
::
`

2
docs/app/composables/useSharedData.ts
View File

@@ -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

94
docs/content/1.getting-started/3.theme.md
View File

@@ -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'
}
}
}
})
]
})
```
:::
::
::

24
docs/content/1.getting-started/6.color-mode/2.vue.md
View File

@@ -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
})
]
})
```
:::
::

2
docs/package.json
View File

@@ -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",

19
pnpm-lock.yaml generated
View File

@@ -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: