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

docs(app): framework select global (#2719)

Browse Source 
Co-authored-by: harlan <harlan@harlanzw.com>
This commit is contained in:
Benjamin Canac
2024-11-25 15:47:52 +01:00
committed by GitHub
parent ffc81cc950
commit ba874c9191
52 changed files with 1757 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
docs/app/app.vue
View File

@@ -73,24 +73,41 @@ useServerSeoMeta({
twitterCard: 'summary_large_image'
})
const updatedNavigation = computed(() => navigation.value?.map(item => ({
...item,
children: item.children?.map((child: typeof item) => ({
...child,
...(child.path === '/getting-started/installation' && {
title: 'Installation',
active: route.path.startsWith('/getting-started/installation'),
children: []
}),
...(child.path === '/getting-started/i18n' && {
title: 'I18n',
active: route.path.startsWith('/getting-started/i18n'),
children: []
})
})) || []
})))
const { framework, frameworks } = useSharedData()
provide('navigation', updatedNavigation)
const groups = computed(() => {
return [{
id: 'framework',
label: 'Framework',
items: frameworks.value
}]
})
function filterFrameworkItems(items: any[]) {
return items?.filter(item => !item.framework || item.framework === framework.value)
}
function processNavigationItem(item: any): any {
if (item.shadow) {
const matchingChild = filterFrameworkItems(item.children)?.[0]
return matchingChild
? {
...matchingChild,
title: item.title,
children: matchingChild.children ? processNavigationItem(matchingChild) : undefined
}
: item
}
return {
...item,
children: item.children?.length ? filterFrameworkItems(item.children)?.map(processNavigationItem) : undefined
}
}
const filteredNavigation = computed(() => navigation.value?.map(processNavigationItem))
provide('navigation', filteredNavigation)
</script>
<template>
@@ -111,7 +128,13 @@ provide('navigation', updatedNavigation)
<Footer />
<ClientOnly>
<LazyUContentSearch v-model:search-term="searchTerm" :files="files" :navigation="navigation" :fuse="{ resultLimit: 42 }" />
<LazyUContentSearch
v-model:search-term="searchTerm"
:files="files"
:groups="groups"
:navigation="filteredNavigation"
:fuse="{ resultLimit: 42 }"
/>
</ClientOnly>
</template>
</UApp>

10
docs/app/assets/icons/icones-js.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.46 283.46">
<defs>
<style>
.cls-1{fill:#231815;}
@media (prefers-color-scheme: dark) { .cls-1{fill:#ffffff;} }
</style>
</defs>
<path class="cls-1" d="M144.89,89.86c-33.46,0-54.44,14.56-66.14,26.76a86,86,0,0,0-23.69,58.94c0,22.64,8.81,43.48,24.8,58.67,15.7,14.92,36.9,23.14,59.68,23.14,23.81,0,46-8.49,62.49-23.91,17-15.9,26.37-37.93,26.37-62C228.4,120.37,185.94,89.86,144.89,89.86Zm.49,153.67a61.49,61.49,0,0,1-46.45-20.4c-12.33-13.76-18.85-32.64-18.85-54.62,0-20.7,6.07-37.67,17.57-49.07,10.11-10,24.39-15.62,40.19-15.74,19,0,35.22,6.56,46.76,19,12.6,13.58,19.27,34,19.27,58.95C203.87,224.39,174.49,243.53,145.38,243.53Z"/>
<polygon class="cls-1" points="198.75 74.96 179.45 74.96 142.09 37.83 104.51 74.96 86.14 74.96 138.09 24.25 146.81 24.25 198.75 74.96"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 855 B

25
docs/app/components/FrameworkSelect.vue Normal file
View File

@@ -0,0 +1,25 @@
<script setup lang="ts">
const { framework, frameworks } = useSharedData()
</script>
<template>
<UDropdownMenu
v-slot="{ open }"
:modal="false"
:items="frameworks"
:ui="{ content: 'w-(--radix-dropdown-menu-trigger-width)' }"
>
<UButton
color="neutral"
variant="outline"
v-bind="frameworks.find(f => f.value === framework)"
block
trailing-icon="i-lucide-chevron-down"
:class="[open && 'bg-[var(--ui-bg-elevated)]']"
:ui="{
trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
}"
class="-mx-2 w-[calc(100%+1rem)]"
/>
</UDropdownMenu>
</template>

2
docs/app/components/Header.vue
View File

@@ -55,6 +55,8 @@ defineShortcuts({
<USeparator type="dashed" class="my-4" />
<FrameworkSelect class="mb-4" />
<UContentNavigation :navigation="navigation" highlight />
</template>
</UHeader>

4
docs/app/components/content/ComponentCode.vue
View File

@@ -272,9 +272,9 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
<div v-if="component" class="flex justify-center border border-b-0 border-[var(--ui-border-muted)] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
<component :is="component" v-bind="{ ...componentProps, ...componentEvents }">
<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
<slot :name="slot">
<MDCSlot :name="slot" unwrap="p">
{{ slots?.[slot] }}
</slot>
</MDCSlot>
</template>
</component>
</div>

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

@@ -4,14 +4,19 @@ import { camelCase } from 'scule'
import * as theme from '#build/ui'
const route = useRoute()
const { framework } = useSharedData()
const name = camelCase(route.params.slug?.[route.params.slug.length - 1] ?? '')
const strippedCompoundVariants = ref(false)
function stripCompoundVariants(component?: any) {
if (component?.compoundVariants) {
component.compoundVariants = component.compoundVariants.filter((compoundVariant: any) => {
const strippedTheme = computed(() => {
const strippedTheme = {
...(theme as any)[name]
}
if (strippedTheme?.compoundVariants) {
strippedTheme.compoundVariants = strippedTheme.compoundVariants.filter((compoundVariant: any) => {
if (compoundVariant.color) {
if (!['primary', 'neutral'].includes(compoundVariant.color)) {
strippedCompoundVariants.value = true
@@ -40,24 +45,43 @@ function stripCompoundVariants(component?: any) {
})
}
return component
}
return strippedTheme
})
const component = computed(() => {
return {
ui: {
[name]: stripCompoundVariants((theme as any)[name])
[name]: strippedTheme.value
}
}
})
const { data: ast } = await useAsyncData(`component-theme-${name}`, async () => {
const { data: ast } = await useAsyncData(`component-theme-${name}-${framework.value}`, async () => {
const md = `
::code-collapse
${framework.value === 'nuxt'
? `
\`\`\`ts [app.config.ts]
export default defineAppConfig(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
\`\`\`\
`
: `
\`\`\`ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')
.split('\n')
.map((line, i) => i === 0 ? line : ` ${line}`)
.join('\n')})
]
})
\`\`\`
`}
::
${strippedCompoundVariants.value
@@ -69,7 +93,7 @@ Some colors in \`compoundVariants\` are omitted for readability. Check out the s
`
return parseMarkdown(md)
})
}, { watch: [framework] })
</script>
<template>

7
docs/app/components/content/FrameworkOnly.vue Normal file
View File

@@ -0,0 +1,7 @@
<script setup lang="ts">
const { framework } = useSharedData()
</script>
<template>
<slot :name="framework" />
</template>

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

@@ -2,8 +2,13 @@
import json5 from 'json5'
import icons from '../../../../src/theme/icons'
const { data: ast } = await useAsyncData(`icons-theme`, async () => {
const { framework } = useSharedData()
const { data: ast } = await useAsyncData(`icons-theme-${framework.value}`, async () => {
const md = `
::code-collapse
${framework.value === 'nuxt'
? `
\`\`\`ts [app.config.ts]
export default defineAppConfig(${json5.stringify({
ui: {
@@ -11,10 +16,33 @@ export default defineAppConfig(${json5.stringify({
}
}, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
\`\`\`\
`
: `
\`\`\`ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui(${json5.stringify({
ui: {
icons
}
}, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')
.split('\n')
.map((line, i) => i === 0 ? line : ` ${line}`)
.join('\n')})
]
})
\`\`\`
`}
::
`
return parseMarkdown(md)
})
}, { watch: [framework] })
</script>
<template>

2
docs/app/components/og-image/OgImageDocs.vue
View File

@@ -56,7 +56,7 @@ defineProps({
<h1 class="m-0 text-[75px] font-semibold mb-2 text-white flex items-center">
<span>{{ title }}</span>
</h1>
<p v-if="description" class="text-[32px] text-[#94a3b8] leading-tight">
<p v-if="description" class="text-[32px] text-[#94a3b8] leading-tight text-balance">
{{ description.slice(0, 200) }}
</p>
</div>

23
docs/app/composables/useSharedData.ts Normal file
View File

@@ -0,0 +1,23 @@
import { createSharedComposable } from '@vueuse/core'
function _useSharedData() {
const framework = useCookie('nuxt-ui-framework', { default: () => 'nuxt' })
const frameworks = computed(() => [{
label: 'Nuxt',
icon: 'i-logos-nuxt-icon',
value: 'nuxt',
onSelect: () => framework.value = 'nuxt'
}, {
label: 'Vue',
icon: 'i-logos-vue',
value: 'vue',
onSelect: () => framework.value = 'vue'
}].map(f => ({ ...f, active: framework.value === f.value })))
return {
framework,
frameworks
}
}
export const useSharedData = createSharedComposable(_useSharedData)

4
docs/app/layouts/docs.vue
View File

@@ -10,6 +10,10 @@ const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
<UPage>
<template #left>
<UPageAside>
<template #top>
<FrameworkSelect />
</template>
<UContentNavigation :navigation="navigation" highlight />
</UPageAside>
</template>

37
docs/app/pages/[...slug].vue
View File

@@ -21,6 +21,28 @@ const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)).map(({ icon, ...link }) => link))
const { framework } = useSharedData()
// Redirect to the correct framework version if the page is not the current framework
if (!import.meta.prerender) {
watch(framework, () => {
if (page.value?.navigation?.framework && page.value?.navigation?.framework !== framework.value) {
if (route.path.endsWith(`/${page.value?.navigation?.framework}`)) {
navigateTo(`${route.path.split('/').slice(0, -1).join('/')}/${framework.value}`)
} else {
navigateTo(`/getting-started`)
}
}
})
}
// Update the framework if the page has a different framework
watch(page, () => {
if (page.value?.navigation?.framework && page.value?.navigation?.framework !== framework.value) {
framework.value = page.value?.navigation?.framework as string
}
}, { immediate: true })
useSeoMeta({
titleTemplate: '%s - Nuxt UI v3',
title: typeof page.value.navigation === 'object' && page.value.navigation.title ? page.value.navigation.title : page.value.title,
@@ -75,21 +97,6 @@ const communityLinks = computed(() => [{
</template>
<template #links>
<UDropdownMenu v-if="page.select" v-slot="{ open }" :items="page.select.items" :content="{ align: 'end' }">
<UButton
color="neutral"
variant="subtle"
v-bind="page.select.items.find((item: any) => item.to === route.path)"
block
trailing-icon="i-lucide-chevron-down"
:class="[open && 'bg-[var(--ui-bg-accented)]/75']"
:ui="{
trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
}"
class="w-[128px]"
/>
</UDropdownMenu>
<UButton
v-for="link in page.links"
:key="link.label"

13
docs/content.config.ts
View File

@@ -5,6 +5,10 @@ export const collections = {
type: 'page',
source: '**/*',
schema: z.object({
navigation: z.object({
title: z.string().optional(),
framework: z.string().optional()
}),
links: z.array(z.object({
label: z.string(),
icon: z.string(),
@@ -14,14 +18,7 @@ export const collections = {
}).optional(),
to: z.string(),
target: z.string().optional()
})),
select: z.object({
items: z.array(z.object({
label: z.string(),
icon: z.string(),
to: z.string()
}))
})
}))
})
})
}

2
docs/content/1.getting-started/1.index.md
View File

@@ -71,7 +71,7 @@ You can now use Nuxt UI in any Vue project without Nuxt by adding the Vite and V
- **Developer Experience**: Complete TypeScript support with IntelliSense and auto-completion
::tip{to="/getting-started/installation/vue"}
Learn how to install and configure Nuxt UI in a Vue project in the [Vue installation guide](/getting-started/installation/vue).
Learn how to install and configure Nuxt UI in a Vue project in the **Vue installation guide**.
::
## Migration

1
docs/content/1.getting-started/2.installation/.navigation.yml Normal file
View File

@@ -0,0 +1 @@
shadow: true

15
docs/content/1.getting-started/2.installation/1.nuxt.md
View File

@@ -1,16 +1,13 @@
---
title: Install in a Nuxt app
title: Installation
description: 'Learn how to install and configure Nuxt UI in your Nuxt application.'
select:
items:
- label: Nuxt
icon: i-logos-nuxt-icon
to: /getting-started/installation/nuxt
- label: Vue
icon: i-logos-vue
to: /getting-started/installation/vue
navigation.framework: nuxt
---
::callout{to="/getting-started/installation/vue" icon="i-logos-vue" class="hidden"}
Looking for the **Vue** version?
::
## Setup
::steps{level="4"}

19
docs/content/1.getting-started/2.installation/2.vue.md
View File

@@ -1,16 +1,13 @@
---
title: Install in a Vue app
title: Installation
description: 'Learn how to install and configure Nuxt UI in your Vue application.'
select:
items:
- label: Nuxt
icon: i-logos-nuxt-icon
to: /getting-started/installation/nuxt
- label: Vue
icon: i-logos-vue
to: /getting-started/installation/vue
navigation.framework: vue
---
::callout{to="/getting-started/installation/nuxt" icon="i-logos-nuxt-icon" class="hidden"}
Looking for the **Nuxt** version?
::
## Setup
::steps{level="4"}
@@ -155,10 +152,6 @@ export default defineConfig({
Use the `ui` option to provide configuration for Nuxt UI.
::warning
In the rest of the docs, there are references to the `app.config.ts` file (which is a Nuxt feature). When using Nuxt UI in a project without Nuxt, this configuration is passed in this `ui` option instead.
::
```ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

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

@@ -78,8 +78,14 @@ Nuxt UI extends Tailwind CSS's theming capabilities, providing a flexible design
### Colors
::framework-only
#nuxt
Nuxt UI leverages Nuxt [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) to provide customizable color aliases based on [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference):
#vue
Nuxt UI leverages Vite config to provide customizable color aliases based on [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference):
::
| Color | Default | Description |
| --- | --- | --- |
| `primary`{color="primary"} | `green` | Main brand color, used as the default color for components. |
@@ -90,6 +96,8 @@ Nuxt UI leverages Nuxt [App Config](https://nuxt.com/docs/guide/directory-struct
| `error`{color="error"} | `red` | Used for form error validation states. |
| `neutral` | `slate` | Neutral color for backgrounds, text, etc. |
::framework-only
#nuxt
You can configure these color aliases at runtime in your `app.config.ts` file under the `ui.colors` key, allowing for dynamic theme customization without requiring an application rebuild:
```ts [app.config.ts]
@@ -103,6 +111,30 @@ export default defineAppConfig({
})
```
#vue
You can configure these color aliases at runtime in your `vite.config.ts` file under the `ui.colors` key:
```ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
colors: {
primary: 'blue',
neutral: 'zinc'
}
}
})
]
})
```
::
::note
Try the :prose-icon{name="i-lucide-swatch-book" class="text-[var(--ui-primary)]"} theme picker in the header above to change `primary` and `neutral` colors.
::
@@ -118,8 +150,10 @@ slots:
---
::
::tip
You can add you own dynamic color aliases in your `app.config.ts`, you just have to make sure to define them in the [`ui.theme.colors`](/getting-started/installation#themecolors) option in your `nuxt.config.ts` file.
::framework-only
#nuxt
:::tip
You can add you own dynamic color aliases in your `app.config.ts`, you just have to make sure to define them in the [`ui.theme.colors`](/getting-started/installation/nuxt#themecolors) option in your `nuxt.config.ts` file.
```ts [app.config.ts]
export default defineAppConfig({
@@ -140,7 +174,34 @@ export default defineNuxtConfig({
}
})
```
:::
#vue
:::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.
```ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
colors: {
tertiary: 'indigo'
}
},
theme: {
colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error']
}
})
]
})
```
:::
::
::warning
@@ -490,7 +551,19 @@ props:
---
::
The `defaultVariants` property specifies the default values for each variant. It determines how a component looks and behaves when no prop is provided. These default values can be customized in your [`app.config.ts`](#appconfigts) to adjust the standard appearance of components throughout your application.
The `defaultVariants` property specifies the default values for each variant. It determines how a component looks and behaves when no prop is provided.
::framework-only
#nuxt
:::tip
These default values can be customized in your [`app.config.ts`](#config) to adjust the standard appearance of components throughout your application.
:::
#vue
:::tip
These default values can be customized in your [`vite.config.ts`](#config) to adjust the standard appearance of components throughout your application.
:::
::
## Customize theme
@@ -507,9 +580,11 @@ You can explore the theme for each component in two ways:
- Browse the source code directly in the GitHub repository at https://github.com/nuxt/ui/tree/v3/src/theme.
::
### `app.config.ts`
### Config
You can override the theme of components inside your `app.config.ts` by using the exact same structure as the theme object.
::framework-only
#nuxt
You can override the theme of components globally inside your `app.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:
@@ -525,13 +600,42 @@ export default defineAppConfig({
})
```
#vue
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 ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
button: {
slots: {
base: 'font-bold'
}
}
}
})
]
})
```
::
::note
In this example, the `font-bold` class will override the default `font-medium` class on all buttons.
::
### `ui` prop
### Props
You can also override a component's **slots** using the `ui` prop. This has priority over the `app.config.ts` configuration and `variants` resolution.
#### `ui` prop
You can also override a component's **slots** using the `ui` prop. This has priority over the global configuration and `variants` resolution.
::component-code{slug="button"}
---
@@ -560,9 +664,9 @@ slots:
In this example, the `trailingIcon` slot is overwritten with `size-3` even though the `md` size variant would apply a `size-5` class to it.
::
### `class` prop
#### `class` prop
The `class` prop allows you to override the classes of the `root` or `base` slot. This has priority over the `app.config.ts` configuration and `variants` resolution.
The `class` prop allows you to override the classes of the `root` or `base` slot. This has priority over the global configuration and `variants` resolution.
::component-code{slug="button"}
---

1
docs/content/1.getting-started/4.icons/.navigation.yml Normal file
View File

@@ -0,0 +1 @@
shadow: true

13
docs/content/1.getting-started/4.icons.md → docs/content/1.getting-started/4.icons/1.nuxt.md
View File

@@ -1,6 +1,7 @@
---
title: Icons
description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.'
navigation.framework: nuxt
links:
- label: 'Iconify'
to: https://iconify.design/
@@ -12,14 +13,14 @@ links:
icon: i-simple-icons-github
---
::callout{to="/getting-started/icons/vue" icon="i-logos-vue" class="hidden"}
Looking for the **Vue** version?
::
## Usage
Nuxt UI automatically registers the [`@nuxt/icon`](https://github.com/nuxt/icon) module for you, so there's no additional setup required.
::note
You can use any name from the https://icones.js.org collection.
::
### Icon Component
You can use the [Icon](/components/icon) component with a `name` prop to display an icon:
@@ -32,6 +33,10 @@ props:
---
::
::note
You can use any name from the https://icones.js.org collection.
::
### Component Props
Some components also have an `icon` prop to display an icon, like the [Button](/components/button) for example:

55
docs/content/1.getting-started/4.icons/2.vue.md Normal file
View File

@@ -0,0 +1,55 @@
---
title: Icons
description: 'Nuxt UI integrates with Iconify to access over 200,000+ icons.'
navigation.framework: vue
links:
- label: 'Iconify'
to: https://iconify.design/
target: _blank
icon: i-simple-icons-iconify
---
::callout{to="/getting-started/icons/nuxt" icon="i-logos-nuxt-icon" class="hidden"}
Looking for the **Nuxt** version?
::
## Usage
### Icon Component
You can use the [Icon](/components/icon) component with a `name` prop to display an icon:
::component-code{slug="icon"}
---
props:
name: 'i-lucide-lightbulb'
class: 'size-5'
---
::
::note
You can use any name from the https://icones.js.org collection.
::
### Component Props
Some components also have an `icon` prop to display an icon, like the [Button](/components/button) for example:
::component-code{slug="button"}
---
ignore:
- color
- variant
props:
icon: i-lucide-sun
variant: subtle
slots:
default: Button
---
::
## Theme
You can change the default icons used by Nuxt UI components in your `vite.config.ts`:
:icons-theme

15
docs/content/1.getting-started/5.fonts.md
View File

@@ -1,6 +1,7 @@
---
title: Fonts
description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.'
navigation.framework: nuxt
links:
- label: 'nuxt/fonts'
to: https://github.com/nuxt/fonts
@@ -10,7 +11,7 @@ links:
## Usage
Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/fonts) module for you, so there's no additional setup required. To use a font in your Nuxt UI application, you can simply declare it in your CSS:
Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/fonts) module for you, so there's no additional setup required. To use a font in your Nuxt UI application, you can simply declare it in your CSS. It will be automatically loaded and optimized for you.
```css [main.css]
@import "tailwindcss";
@@ -21,8 +22,12 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
}
```
That's it! Nuxt Fonts will detect this and you should immediately see the web font loaded in your browser.
You can disable the `@nuxt/fonts` module with the `ui.fonts` option in your `nuxt.config.ts`:
::note{to="https://fonts.nuxt.com/advanced" target="_blank"}
Read more about how `@nuxt/fonts` work behind the scenes to optimize your fonts.
::
```ts [nuxt.config.ts]
export default defineNuxtConfig({
ui: {
fonts: false
}
})
```

27
docs/content/1.getting-started/6.color-mode.md
View File

@@ -1,27 +0,0 @@
---
title: Color Mode
description: 'Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.'
links:
- label: 'nuxtjs/color-mode'
to: https://github.com/nuxt-modules/color-mode
target: _blank
icon: i-simple-icons-github
---
## Usage
Nuxt UI automatically registers the [`@nuxtjs/color-mode`](https://github.com/nuxt-modules/color-mode) module for you, so there's no additional setup required.
You can disable dark mode by setting the `preference` to `light` instead of `system` in your `nuxt.config.ts`.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
colorMode: {
preference: 'light'
}
})
```
::tip
If you're stuck in dark mode even after changing this setting, you might need to remove the `nuxt-color-mode` entry from your browser's local storage.
::

1
docs/content/1.getting-started/6.color-mode/.navigation.yml Normal file
View File

@@ -0,0 +1 @@
shadow: true

58
docs/content/1.getting-started/6.color-mode/1.nuxt.md Normal file
View File

@@ -0,0 +1,58 @@
---
title: Color Mode
description: 'Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.'
navigation.framework: nuxt
links:
- label: 'nuxtjs/color-mode'
to: https://github.com/nuxt-modules/color-mode
target: _blank
icon: i-simple-icons-github
---
::callout{to="/getting-started/color-mode/vue" icon="i-logos-vue" class="hidden"}
Looking for the **Vue** version?
::
## Usage
Nuxt UI automatically registers the [`@nuxtjs/color-mode`](https://github.com/nuxt-modules/color-mode) module for you, so there's no additional setup required. You can simply use the `useColorMode` composable to switch between light and dark modes:
```vue [ColorModeButton.vue]
<script setup>
const colorMode = useColorMode()
const isDark = computed({
get() {
return colorMode.value === 'dark'
},
set() {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
})
</script>
<template>
<ClientOnly v-if="!colorMode?.forced">
<UButton
:icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
color="neutral"
variant="ghost"
@click="isDark = !isDark"
/>
<template #fallback>
<div class="size-8" />
</template>
</ClientOnly>
</template>
```
You can disable the `@nuxtjs/color-mode` module with the `ui.colorMode` option in your `nuxt.config.ts`:
```ts [nuxt.config.ts]
export default defineNuxtConfig({
ui: {
colorMode: false
}
})
```

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

@@ -0,0 +1,47 @@
---
title: Color Mode
description: 'Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.'
navigation.framework: vue
---
::callout{to="/getting-started/color-mode/nuxt" icon="i-logos-nuxt-icon" class="hidden"}
Looking for the **Nuxt** version?
::
## Usage
Nuxt UI automatically registers the [useDark](https://vueuse.org/core/useDark) composable as a Vue plugin, so there's no additional setup required. You can simply use it to switch between light and dark modes:
```vue [ColorModeButton.vue]
<script setup>
import { useColorMode } from '@vueuse/core'
const mode = useColorMode()
</script>
<template>
<UButton
:icon="mode === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'"
color="neutral"
variant="ghost"
@click="mode = mode === 'dark' ? 'light' : 'dark'"
/>
</template>
```
You can disable this plugin with the `colorMode` option in your `vite.config.ts`:
```ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
colorMode: false
})
]
})
```

1
docs/content/1.getting-started/7.i18n/.navigation.yml
View File

@@ -1 +1,2 @@
badge: New
shadow: true

17
docs/content/1.getting-started/7.i18n/1.nuxt.md
View File

@@ -1,20 +1,17 @@
---
title: Internationalization (i18n) in a Nuxt app
title: Internationalization (i18n)
description: 'Learn how to internationalize your Nuxt app with multi-directional support (LTR/RTL).'
select:
items:
- label: Nuxt
icon: i-logos-nuxt-icon
to: /getting-started/i18n/nuxt
- label: Vue
icon: i-logos-vue
to: /getting-started/i18n/vue
navigation.framework: nuxt
---
::callout{to="/getting-started/i18n/vue" icon="i-logos-vue" class="hidden"}
Looking for the **Vue** version?
::
## Usage
::note{to="/components/app"}
Nuxt UI provides an [App](/components/app) component that wraps your app to provide global configurations.
Nuxt UI provides an **App** component that wraps your app to provide global configurations.
::
### Locale

17
docs/content/1.getting-started/7.i18n/2.vue.md
View File

@@ -1,20 +1,17 @@
---
title: Internationalization (i18n) in a Vue app
title: Internationalization (i18n)
description: 'Learn how to internationalize your Vue app with multi-directional support (LTR/RTL).'
select:
items:
- label: Nuxt
icon: i-logos-nuxt-icon
to: /getting-started/i18n/nuxt
- label: Vue
icon: i-logos-vue
to: /getting-started/i18n/vue
navigation.framework: vue
---
::callout{to="/getting-started/i18n/nuxt" icon="i-logos-nuxt-icon" class="hidden"}
Looking for the **Nuxt** version?
::
## Usage
::note{to="/components/app"}
Nuxt UI provides an [App](/components/app) component that wraps your app to provide global configurations.
Nuxt UI provides an **App** component that wraps your app to provide global configurations.
::
### Locale

10
docs/content/3.components/0.app.md
View File

@@ -27,8 +27,16 @@ Use it as at the root of your app:
</template>
```
::tip{to="/getting-started/i18n/nuxt#locale"}
::framework-only
#nuxt
:::tip{to="/getting-started/i18n/nuxt#locale"}
Learn how to use the `locale` prop to change the locale of your app.
:::
#vue
:::tip{to="/getting-started/i18n/vue#locale"}
Learn how to use the `locale` prop to change the locale of your app.
:::
::
## API

10
docs/content/3.components/accordion.md
View File

@@ -168,8 +168,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronDown` key.
:::
::
## Examples

10
docs/content/3.components/alert.md
View File

@@ -178,8 +178,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
:::
::
### Actions

10
docs/content/3.components/breadcrumb.md
View File

@@ -67,8 +67,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronRight` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronRight` key.
:::
::
## Examples

10
docs/content/3.components/button.md
View File

@@ -197,8 +197,16 @@ slots:
Button
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Disabled

10
docs/content/3.components/carousel.md
View File

@@ -94,8 +94,16 @@ options:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize these icons globally in your `app.config.ts` under `ui.icons.arrowLeft` / `ui.icons.arrowRight` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize these icons globally in your `vite.config.ts` under `ui.icons.arrowLeft` / `ui.icons.arrowRight` key.
:::
::
### Dots

20
docs/content/3.components/checkbox.md
View File

@@ -58,8 +58,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.minus` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.minus` key.
:::
::
### Label
@@ -115,8 +123,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.check` key.
:::
::
### Color

30
docs/content/3.components/command-palette.md
View File

@@ -216,8 +216,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.search` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.search` key.
:::
::
### Loading
@@ -277,8 +285,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Disabled
@@ -404,8 +420,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
:::
::
## Examples

18
docs/content/3.components/icon.md
View File

@@ -1,14 +1,15 @@
---
description: A wrapper around Nuxt Icon component to display icons.
description: A component to display any icon from Iconify.
links:
- label: Nuxt Icon
icon: i-simple-icons-github
to: https://github.com/nuxt/icon
- label: Icônes
to: https://icones.js.org/
target: _blank
icon: i-custom-icones-js
---
## Usage
You can use any name from the https://icones.js.org collection:
Use the `name` prop to display an icon:
::component-code
---
@@ -18,8 +19,11 @@ props:
---
::
::tip
It's highly recommended to install the icons collections you need, read more about this in [Icons](/getting-started/icons#collections).
::framework-only
#nuxt
:::caution{to="/getting-started/icons/nuxt#collections"}
It's highly recommended to install the icons collections you need, read more about this.
:::
::
## API

40
docs/content/3.components/input-menu.md
View File

@@ -189,8 +189,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
:::
::
### Placeholder
@@ -441,8 +449,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronDown` key.
:::
::
### Selected Icon
@@ -470,8 +486,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.check` key.
:::
::
### Avatar
@@ -550,8 +574,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Disabled

12
docs/content/3.components/input.md
View File

@@ -184,8 +184,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Disabled
@@ -290,7 +298,7 @@ name: 'input-form-field-example'
::
::tip{to="/components/form"}
It also provides validation and error handling when used within a [Form](/components/form) component.
It also provides validation and error handling when used within a **Form** component.
::
### Within a ButtonGroup

10
docs/content/3.components/modal.md
View File

@@ -156,8 +156,16 @@ slots:
:placeholder{class="h-48"}
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
:::
::
### Overlay

10
docs/content/3.components/navigation-menu.md
View File

@@ -434,8 +434,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronDown` key.
:::
::
### Arrow

30
docs/content/3.components/select-menu.md
View File

@@ -482,8 +482,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronDown` key.
:::
::
### Selected Icon
@@ -513,8 +521,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.check` key.
:::
::
### Avatar
@@ -599,8 +615,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Disabled

32
docs/content/3.components/select.md
View File

@@ -206,7 +206,7 @@ props:
::
::note{to="https://www.radix-vue.com/components/select.html#change-the-positioning-mode"}
Read more about the `content.position` prop in the [Radix Vue documentation](https://www.radix-vue.com/components/select.html#change-the-positioning-mode).
Read more about the `content.position` prop in the **Radix Vue** documentation.
::
<!--
@@ -378,8 +378,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronDown` key.
:::
::
### Selected Icon
@@ -409,8 +417,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.check` key.
:::
::
### Avatar
@@ -495,8 +511,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Disabled

10
docs/content/3.components/slideover.md
View File

@@ -156,8 +156,16 @@ slots:
:placeholder{class="h-full"}
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
:::
::
### Side

10
docs/content/3.components/switch.md
View File

@@ -123,8 +123,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Color

10
docs/content/3.components/toast.md
View File

@@ -128,8 +128,16 @@ name: 'toast-close-icon-example'
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
:::
::
### Actions

11
docs/nuxt.config.ts
View File

@@ -41,6 +41,15 @@ export default defineNuxtConfig({
markdown: {
highlight: {
langs: ['bash', 'ts', 'typescript', 'diff', 'vue', 'json', 'yml', 'css', 'mdc']
},
remarkPlugins: {
'remark-mdc': {
options: {
experimental: {
autoUnwrap: false
}
}
}
}
}
}
@@ -61,6 +70,8 @@ export default defineNuxtConfig({
routeRules: {
'/': { redirect: '/getting-started', prerender: false },
'/getting-started/installation': { redirect: '/getting-started/installation/nuxt', prerender: false },
'/getting-started/icons': { redirect: '/getting-started/icons/nuxt', prerender: false },
'/getting-started/color-mode': { redirect: '/getting-started/color-mode/nuxt', prerender: false },
'/getting-started/i18n': { redirect: '/getting-started/i18n/nuxt', prerender: false },
'/composables': { redirect: '/composables/define-shortcuts', prerender: false },
'/components': { redirect: '/components/app', prerender: false }

2
docs/package.json
View File

@@ -10,7 +10,7 @@
"@nuxt/content": "3.0.0-alpha.7",
"@nuxt/image": "^1.8.1",
"@nuxt/ui": "latest",
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@7318863",
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@1408077",
"@nuxthub/core": "^0.8.7",
"@nuxtjs/plausible": "^1.1.1",
"@octokit/rest": "^21.0.2",

2
playground/app/app.vue
View File

@@ -6,8 +6,6 @@ const router = useRouter()
const appConfig = useAppConfig()
const colorMode = useColorMode()
defineOptions({ inheritAttrs: false })
const isDark = computed({
get() {
return colorMode.value === 'dark'

1415
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

12
src/module.ts
View File

@@ -13,21 +13,21 @@ export interface ModuleOptions {
/**
* Prefix for components
* @defaultValue `U`
* @link https://ui3.nuxt.dev/getting-started/installation#prefix
* @link https://ui3.nuxt.dev/getting-started/installation/nuxt#prefix
*/
prefix?: string
/**
* Enable or disable `@nuxt/fonts` module
* @defaultValue `true`
* @link https://ui3.nuxt.dev/getting-started/installation#fonts
* @link https://ui3.nuxt.dev/getting-started/installation/nuxt#fonts
*/
fonts?: boolean
/**
* Enable or disable `@nuxtjs/color-mode` module
* @defaultValue `true`
* @link https://ui3.nuxt.dev/getting-started/installation#colormode
* @link https://ui3.nuxt.dev/getting-started/installation/nuxt#colormode
*/
colorMode?: boolean
@@ -39,14 +39,14 @@ export interface ModuleOptions {
/**
* Define the color aliases available for components
* @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
* @link https://ui3.nuxt.dev/getting-started/installation#themecolors
* @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themecolors
*/
colors?: string[]
/**
* Enable or disable transitions on components
* @defaultValue `true`
* @link https://ui3.nuxt.dev/getting-started/installation#themetransitions
* @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themetransitions
*/
transitions?: boolean
}
@@ -70,7 +70,7 @@ export default defineNuxtModule<ModuleOptions>({
compatibility: {
nuxt: '>=3.13.1'
},
docs: 'https://ui3.nuxt.dev/getting-started/installation'
docs: 'https://ui3.nuxt.dev/getting-started/installation/nuxt'
},
defaults: defaultOptions,
async setup(options, nuxt) {