mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-24 00:40:34 +01:00
docs: new structure (#1282)
Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Benjamin Canac
GitHub
@@ -3,11 +3,9 @@ title: Introduction
|
||||
description: 'Fully styled and customizable components for Nuxt.'
|
||||
---
|
||||
|
||||
This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for [Volta](https://volta.net) and [Nuxt Studio](https://nuxt.studio/), its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
|
||||
Nuxt UI is a module that provides a set of Vue components and composables built with [Tailwind CSS](https://tailwindcss.com/) and [Headless UI](https://headlessui.dev/) to help you build beautiful and accessible user interfaces.
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
[Volta](https://volta.net/) entire UI is built with this module alongside the 50+ keyboard shortcuts defined.
|
||||
::
|
||||
Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
|
||||
|
||||
## Features
|
||||
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
description: 'Learn how to install and configure the module in your Nuxt app.'
|
||||
title: Installation
|
||||
description: 'Learn how to install and configure Nuxt UI in your application.'
|
||||
---
|
||||
|
||||
## Quick Start
|
||||
## Setup
|
||||
|
||||
1. Install `@nuxt/ui` dependency to your project:
|
||||
|
||||
@@ -91,7 +92,7 @@ You can read more about this in the [Theming](/getting-started/theming#dark-mode
|
||||
This module is installed when using the `dynamic` prop on the `Icon` component or globally through the `ui.icons.dynamic` option in your `app.config.ts`.
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
You can read more about this in the [Theming](/getting-started/theming#dynamic-icons) section and on the [Icon](/elements/icon) component page.
|
||||
You can read more about this in the [Theming](/getting-started/theming#dynamic-icons) section and on the [Icon](/components/icon) component page.
|
||||
::
|
||||
|
||||
## TypeScript
|
||||
|
||||
@@ -2,8 +2,6 @@
|
||||
description: 'Learn how to customize the look and feel of the components.'
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
This module relies on Nuxt [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) file to customize the look and feel of the components at runtime with HMR (hot-module-replacement).
|
||||
|
||||
## Colors
|
||||
@@ -70,7 +68,7 @@ The `primary` color also has a `DEFAULT` shade that changes based on the theme.
|
||||
|
||||
### Smart Safelisting
|
||||
|
||||
Components having a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style), [Input](/forms/input#style) (inherited in [Select](/forms/select) and [SelectMenu](/forms/select-menu)), [RadioGroup](/forms/radio-group), [Checkbox](/forms/checkbox), [Toggle](/forms/toggle), [Range](/forms/range) and [Notification](/overlays/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
|
||||
Components having a `color` prop like [Avatar](/components/avatar#chip), [Badge](/components/badge#style), [Button](/components/button#style), [Input](/components/input#style) (inherited in [Select](/components/select) and [SelectMenu](/components/select-menu)), [RadioGroup](/components/radio-group), [Checkbox](/components/checkbox), [Toggle](/components/toggle), [Range](/components/range) and [Notification](/components/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
|
||||
|
||||
Variant classes of those components are defined with a syntax like `bg-{color}-500 dark:bg-{color}-400` so they can be used with any color. However, this means that Tailwind will not find those classes and therefore will not generate the corresponding CSS.
|
||||
|
||||
@@ -227,10 +225,6 @@ All the components are styled with dark mode in mind.
|
||||
|
||||
Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
|
||||
|
||||
::callout{icon="i-heroicons-puzzle-piece"}
|
||||
Learn how to build a color mode button in the [Examples](/getting-started/examples#color-mode-button) page.
|
||||
::
|
||||
|
||||
You can disable dark mode by setting the `preference` to `light` instead of `system` in your `nuxt.config.ts`.
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
@@ -245,6 +239,42 @@ export default defineNuxtConfig({
|
||||
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.
|
||||
::
|
||||
|
||||
You can easily build a color mode button by using the `useColorMode` composable from `@nuxtjs/color-mode`.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:color-mode-button
|
||||
|
||||
#code
|
||||
```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>
|
||||
<UButton
|
||||
:icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
|
||||
color="gray"
|
||||
variant="ghost"
|
||||
aria-label="Theme"
|
||||
@click="isDark = !isDark"
|
||||
/>
|
||||
<template #fallback>
|
||||
<div class="w-8 h-8" />
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Icons
|
||||
|
||||
You can use any icon (100,000+) from [Iconify](https://iconify.design/).
|
||||
@@ -257,7 +287,7 @@ Some components have an `icon` prop that allows you to add an icon to the compon
|
||||
</template>
|
||||
```
|
||||
|
||||
You can also use the [Icon](/elements/icon) component to add an icon anywhere in your app by following this pattern: `i-{collection_name}-{icon_name}`.
|
||||
You can also use the [Icon](/components/icon) component to add an icon anywhere in your app by following this pattern: `i-{collection_name}-{icon_name}`.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
@@ -347,7 +377,7 @@ export default defineNuxtConfig({
|
||||
|
||||
The `Icon` component also has a `dynamic` prop to use the [nuxt-icon](https://github.com/nuxt-modules/icon/) module instead of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
|
||||
|
||||
Read more about this in the [Icon](/elements/icon#dynamic) component page.
|
||||
Read more about this in the [Icon](/components/icon#dynamic) component page.
|
||||
|
||||
### Defaults
|
||||
|
||||
|
||||
@@ -2,15 +2,13 @@
|
||||
description: 'Learn how to display and define keyboard shortcuts in your app.'
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Some components like [Dropdown](/elements/dropdown), [Command Palette](/navigation/command-palette) and [Tooltip](/overlays/tooltip) support the display of keyboard shortcuts.
|
||||
Some components like [Dropdown](/components/dropdown), [Command Palette](/components/command-palette) and [Tooltip](/components/tooltip) support the display of keyboard shortcuts.
|
||||
|
||||
```vue
|
||||
<UDropdown :items="[[{ label: 'Edit', shortcuts: ['E'] }]]" />
|
||||
```
|
||||
|
||||
Shortcuts are displayed and styled through the [Kbd](/elements/kbd) component.
|
||||
Shortcuts are displayed and styled through the [Kbd](/components/kbd) component.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
|
||||
@@ -1,182 +0,0 @@
|
||||
---
|
||||
title: Examples
|
||||
description: Discover some real-life examples of components you can build.
|
||||
---
|
||||
|
||||
::callout{icon="i-heroicons-wrench-screwdriver"}
|
||||
If you have any ideas of examples you'd like to see, please comment on [this issue](https://github.com/nuxt/ui/issues/297).
|
||||
::
|
||||
|
||||
## Components
|
||||
|
||||
You can mix and match components to build your own UI.
|
||||
|
||||
### ColorModeButton
|
||||
|
||||
You can easily build a color mode button by using the `useColorMode` composable from `@nuxtjs/color-mode`.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:color-mode-button
|
||||
|
||||
#code
|
||||
```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>
|
||||
<UButton
|
||||
:icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
|
||||
color="gray"
|
||||
variant="ghost"
|
||||
aria-label="Theme"
|
||||
@click="isDark = !isDark"
|
||||
/>
|
||||
|
||||
<template #fallback>
|
||||
<div class="w-8 h-8" />
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### DatePicker
|
||||
|
||||
Here is an example of a date picker component built with [v-calendar](https://github.com/nathanreyes/v-calendar).
|
||||
|
||||
```vue [components/DatePicker.vue]
|
||||
<script setup lang="ts">
|
||||
import { DatePicker as VCalendarDatePicker } from 'v-calendar'
|
||||
import 'v-calendar/dist/style.css'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Date,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:model-value', 'close'])
|
||||
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const isDark = computed(() => colorMode.value === 'dark')
|
||||
|
||||
const date = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => {
|
||||
emit('update:model-value', value)
|
||||
emit('close')
|
||||
}
|
||||
})
|
||||
|
||||
const attrs = [{
|
||||
key: 'today',
|
||||
highlight: {
|
||||
color: 'blue',
|
||||
fillMode: 'outline',
|
||||
class: '!bg-gray-100 dark:!bg-gray-800'
|
||||
},
|
||||
dates: new Date()
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCalendarDatePicker
|
||||
v-model="date"
|
||||
transparent
|
||||
borderless
|
||||
:attributes="attrs"
|
||||
:is-dark="isDark"
|
||||
title-position="left"
|
||||
trim-weeks
|
||||
:first-day-of-week="2"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
You can use it inside a [Popover](/overlays/popover) component to display it when clicking on a [Button](/elements/button).
|
||||
|
||||
:component-example{component="date-picker-example"}
|
||||
|
||||
### Table
|
||||
|
||||
Here is an example of a Table component with all its features implemented.
|
||||
|
||||
:component-example{component="table-example-advanced" hiddenCode :padding="false" }
|
||||
|
||||
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue" target="_blank"}
|
||||
Take a look at the component!
|
||||
::
|
||||
|
||||
## Theming
|
||||
|
||||
Our theming system provides a lot of flexibility to customize the components.
|
||||
|
||||
### CommandPalette
|
||||
|
||||
Here is some examples of what you can do with the [CommandPalette](/navigation/command-palette).
|
||||
|
||||
#### Algolia
|
||||
|
||||
::component-example
|
||||
---
|
||||
padding: false
|
||||
component: 'command-palette-example-theme-algolia'
|
||||
componentProps:
|
||||
class: 'max-h-[480px] rounded-md'
|
||||
hiddenCode: true
|
||||
---
|
||||
::
|
||||
|
||||
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue#L23" target="_blank"}
|
||||
Take a look at the component!
|
||||
::
|
||||
|
||||
#### Raycast
|
||||
|
||||
::component-example
|
||||
---
|
||||
padding: false
|
||||
component: 'command-palette-example-theme-raycast'
|
||||
componentProps:
|
||||
class: 'max-h-[480px] rounded-md'
|
||||
hiddenCode: true
|
||||
---
|
||||
::
|
||||
|
||||
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue#L30" target="_blank"}
|
||||
Take a look at the component!
|
||||
::
|
||||
|
||||
### VerticalNavigation
|
||||
|
||||
:component-example{component="vertical-navigation-example-theme-tailwind"}
|
||||
|
||||
### Pagination
|
||||
|
||||
:component-example{component="pagination-example-theme-rounded"}
|
||||
|
||||
## RTL Support
|
||||
|
||||
Here are some examples of how components look like in RTL mode.
|
||||
|
||||
### Pagination
|
||||
|
||||
:component-example{component="pagination-example-r-t-l" hiddenCode}
|
||||
|
||||
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/PaginationExampleRTL.vue" target="_blank"}
|
||||
Take a look at the component!
|
||||
::
|
||||
@@ -1,10 +1,9 @@
|
||||
---
|
||||
title: Contributing
|
||||
description: Learn how to contribute to Nuxt UI.
|
||||
navigation: false
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Nuxt UI thrives thanks to its fantastic community ❤️, which contributes by submitting issues, creating pull requests, and offering valuable feedback.
|
||||
|
||||
Before reporting a bug or reporting a feature, please make sure that you have read through our documentation and existing [issues](https://github.com/nuxt/ui/issues).
|
||||
|
||||
@@ -11,7 +11,7 @@ links:
|
||||
|
||||
## Usage
|
||||
|
||||
Pass an array to the `items` prop of the Accordion component. Each item can have any property from the [Button](/elements/button) component such as `label`, `icon`, `color`, `variant`, `size`, etc. but also:
|
||||
Pass an array to the `items` prop of the Accordion component. Each item can have any property from the [Button](/components/button) component such as `label`, `icon`, `color`, `variant`, `size`, etc. but also:
|
||||
|
||||
- `slot` - A key to customize the item with a slot.
|
||||
- `content` - The content to display in the panel by default.
|
||||
@@ -23,7 +23,7 @@ Pass an array to the `items` prop of the Accordion component. Each item can have
|
||||
|
||||
### Style
|
||||
|
||||
You can also pass any prop from the [Button](/elements/button) component directly to the Accordion component to style the buttons.
|
||||
You can also pass any prop from the [Button](/components/button) component directly to the Accordion component to style the buttons.
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -48,7 +48,7 @@ excludedProps:
|
||||
|
||||
### Avatar
|
||||
|
||||
Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props.
|
||||
Use the [avatar](/components/avatar) prop as an `object` and configure it with any of its props.
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -93,7 +93,7 @@ excludedProps:
|
||||
|
||||
Use the `close-button` prop to hide or customize the close button on the Alert.
|
||||
|
||||
You can pass all the props of the [Button](/elements/button) component to customize it through the `close-button` prop or globally through `ui.alert.default.closeButton`.
|
||||
You can pass all the props of the [Button](/components/button) component to customize it through the `close-button` prop or globally through `ui.alert.default.closeButton`.
|
||||
|
||||
It defaults to `null` which means no close button will be displayed. A `close` event will be emitted when the close button is clicked.
|
||||
|
||||
@@ -116,7 +116,7 @@ excludedProps:
|
||||
|
||||
Use the `actions` prop to add actions to the Alert.
|
||||
|
||||
Like for `closeButton`, you can pass all the props of the [Button](/elements/button) component plus a `click` function in the action but also customize the default style for the actions globally through `ui.alert.default.actionButton`.
|
||||
Like for `closeButton`, you can pass all the props of the [Button](/components/button) component plus a `click` function in the action but also customize the default style for the actions globally through `ui.alert.default.actionButton`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -310,7 +310,7 @@ code: |
|
||||
:u-button{icon="i-heroicons-chevron-down-20-solid" color="gray"}
|
||||
::
|
||||
|
||||
This can also work with an [Input](/forms/input) component for example:
|
||||
This can also work with an [Input](/components/input) component for example:
|
||||
|
||||
::component-card{slug="UButtonGroup"}
|
||||
---
|
||||
@@ -96,7 +96,7 @@ excludedProps:
|
||||
|
||||
Use the `close-button` prop to display a close button on the right side of the input.
|
||||
|
||||
You can pass all the props of the [Button](/elements/button) component to customize it through the `close-button` prop or globally through `ui.commandPalette.default.closeButton`.
|
||||
You can pass all the props of the [Button](/components/button) component to customize it through the `close-button` prop or globally through `ui.commandPalette.default.closeButton`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -257,3 +257,39 @@ When accessing the component via a template ref, you can use the following:
|
||||
## Config
|
||||
|
||||
:component-preset
|
||||
|
||||
## Example
|
||||
|
||||
Here are a few examples illustrating how you can customize the appearance of the `CommandPalette` component by utilizing its `ui` prop.
|
||||
|
||||
### Algolia
|
||||
|
||||
::component-example
|
||||
---
|
||||
padding: false
|
||||
component: 'command-palette-example-theme-algolia'
|
||||
componentProps:
|
||||
class: 'max-h-[480px] rounded-md'
|
||||
hiddenCode: true
|
||||
---
|
||||
::
|
||||
|
||||
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue#L23" target="_blank"}
|
||||
Take a look at the component!
|
||||
::
|
||||
|
||||
### Raycast
|
||||
|
||||
::component-example
|
||||
---
|
||||
padding: false
|
||||
component: 'command-palette-example-theme-raycast'
|
||||
componentProps:
|
||||
class: 'max-h-[480px] rounded-md'
|
||||
hiddenCode: true
|
||||
---
|
||||
::
|
||||
|
||||
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue#L30" target="_blank"}
|
||||
Take a look at the component!
|
||||
::
|
||||
112
docs/content/2.components/date-picker.md
Normal file
112
docs/content/2.components/date-picker.md
Normal file
@@ -0,0 +1,112 @@
|
||||
---
|
||||
title: DatePicker
|
||||
description: 'An example of a date picker component built with v-calendar.'
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
This example is a composition of a [Popover](/components/popover) and [v-calendar](https://github.com/nathanreyes/v-calendar). We also use [date-fns](https://date-fns.org/) to format dates.
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
Note that you can use any calendar library you want.
|
||||
::
|
||||
|
||||
Let's start by installing the `v-calendar` and `date-fns` dependency:
|
||||
|
||||
::code-group
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm add v-calendar
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add v-calendar
|
||||
```
|
||||
|
||||
```bash [npm]
|
||||
npm install v-calendar
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
## Usage
|
||||
|
||||
You can create a `DatePicker.vue` component based on the `DatePicker` from `v-calendar`.
|
||||
|
||||
The following example is styled based on the `primary` and `gray` colors and supports the `dark` mode. It also supports a `v-model` or `v-model.range` depending on the type of date you want to use.
|
||||
|
||||
```vue [components/DatePicker.vue]
|
||||
<script setup lang="ts">
|
||||
import { DatePicker as VCalendarDatePicker } from 'v-calendar'
|
||||
import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
|
||||
import 'v-calendar/dist/style.css'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:model-value', 'close'])
|
||||
|
||||
const date = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => {
|
||||
emit('update:model-value', value)
|
||||
emit('close')
|
||||
}
|
||||
})
|
||||
|
||||
const attrs = {
|
||||
transparent: true,
|
||||
borderless: true,
|
||||
color: 'primary',
|
||||
'is-dark': { selector: 'html', darkClass: 'dark' },
|
||||
'first-day-of-week': 2,
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCalendarDatePicker v-if="date && (typeof date === 'object')" v-model.range="date" :columns="2" v-bind="{ ...attrs, ...$attrs }" />
|
||||
<VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--vc-gray-50: rgb(var(--color-gray-50));
|
||||
--vc-gray-100: rgb(var(--color-gray-100));
|
||||
--vc-gray-200: rgb(var(--color-gray-200));
|
||||
--vc-gray-300: rgb(var(--color-gray-300));
|
||||
--vc-gray-400: rgb(var(--color-gray-400));
|
||||
--vc-gray-500: rgb(var(--color-gray-500));
|
||||
--vc-gray-600: rgb(var(--color-gray-600));
|
||||
--vc-gray-700: rgb(var(--color-gray-700));
|
||||
--vc-gray-800: rgb(var(--color-gray-800));
|
||||
--vc-gray-900: rgb(var(--color-gray-900));
|
||||
}
|
||||
|
||||
.vc-primary {
|
||||
--vc-accent-50: rgb(var(--color-primary-50));
|
||||
--vc-accent-100: rgb(var(--color-primary-100));
|
||||
--vc-accent-200: rgb(var(--color-primary-200));
|
||||
--vc-accent-300: rgb(var(--color-primary-300));
|
||||
--vc-accent-400: rgb(var(--color-primary-400));
|
||||
--vc-accent-500: rgb(var(--color-primary-500));
|
||||
--vc-accent-600: rgb(var(--color-primary-600));
|
||||
--vc-accent-700: rgb(var(--color-primary-700));
|
||||
--vc-accent-800: rgb(var(--color-primary-800));
|
||||
--vc-accent-900: rgb(var(--color-primary-900));
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### DatePicker
|
||||
|
||||
:component-example{component="date-picker-example"}
|
||||
|
||||
### DateRangePicker
|
||||
|
||||
:component-example{component="date-picker-range-example"}
|
||||
@@ -34,7 +34,7 @@ excludedProps:
|
||||
|
||||
### Avatar
|
||||
|
||||
Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props.
|
||||
Use the [avatar](/components/avatar) prop as an `object` and configure it with any of its props.
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -17,7 +17,7 @@ Pass an array of arrays to the `items` prop of the Dropdown component. Each arra
|
||||
- `labelClass` - The class of the item label.
|
||||
- `icon` - The icon of the item.
|
||||
- `iconClass` - The class of the item icon.
|
||||
- `avatar` - The avatar of the item. You can pass all the props of the [Avatar](/elements/avatar) component.
|
||||
- `avatar` - The avatar of the item. You can pass all the props of the [Avatar](/components/avatar) component.
|
||||
- `shortcuts` - The shortcuts of the item.
|
||||
- `slot` - The slot of the item.
|
||||
- `disabled` - Whether the item is disabled.
|
||||
@@ -10,7 +10,7 @@ links:
|
||||
|
||||
## Usage
|
||||
|
||||
Use the FormGroup component around an [Input](/forms/input), [Textarea](/forms/textarea), [Select](/forms/select) or a [SelectMenu](/forms/select-menu) with a `label`. The `<label>` will automatically be associated with the form element so it gets focused on click.
|
||||
Use the FormGroup component around an [Input](/components/input), [Textarea](/components/textarea), [Select](/components/select) or a [SelectMenu](/components/select-menu) with a `label`. The `<label>` will automatically be associated with the form element so it gets focused on click.
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -129,7 +129,7 @@ code: >-
|
||||
:u-input{model-value="benjamincanac" placeholder="you@example.com"}
|
||||
::
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb" to="/forms/form"}
|
||||
::callout{icon="i-heroicons-light-bulb" to="/components/form"}
|
||||
Learn more about form validation in the `Form` component.
|
||||
::
|
||||
|
||||
@@ -162,7 +162,7 @@ async function onSubmit (event: FormSubmitEvent<any>) {
|
||||
The Form component automatically triggers validation upon `submit`, `input`, `blur` or `change` events. This ensures that any errors are displayed as soon as the user interacts with the form elements. You can control when validation happens this using the `validate-on` prop.
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
Note that the `input` event is not triggered until after the initial `blur` event. This is to prevent the form from being validated as the user is typing. You can override this behavior by setting the [`eager-validation`](/forms/form-group#eager-validation) prop on [`FormGroup`](/forms/form-group) to `true`.
|
||||
Note that the `input` event is not triggered until after the initial `blur` event. This is to prevent the form from being validated as the user is typing. You can override this behavior by setting the [`eager-validation`](/components/form-group#eager-validation) prop on [`FormGroup`](/components/form-group) to `true`.
|
||||
::
|
||||
|
||||
::component-example
|
||||
@@ -17,8 +17,8 @@ Pass an array to the `links` prop of the HorizontalNavigation component. Each li
|
||||
- `labelClass` - The class of the link label.
|
||||
- `icon` - The icon of the link.
|
||||
- `iconClass` - The class of the link icon.
|
||||
- `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/elements/avatar) component.
|
||||
- `badge` - A badge to display next to the label. You can pass all the props of the [Badge](/elements/badge) component.
|
||||
- `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/components/avatar) component.
|
||||
- `badge` - A badge to display next to the label. You can pass all the props of the [Badge](/components/badge) component.
|
||||
- `click` - The click handler of the link.
|
||||
|
||||
You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
|
||||
@@ -12,7 +12,7 @@ links:
|
||||
|
||||
## Usage
|
||||
|
||||
The `InputMenu` component renders by default an [Input](/forms/input) component and is based on the `ui.input` preset. You can use most of the `Input` props to configure the display such as [color](/forms/input#style), [variant](/forms/input#style), [size](/forms/input#size), [placeholder](/forms/input#placeholder), [icon](/forms/input#icon), [disabled](/forms/input#disabled), etc.
|
||||
The `InputMenu` component renders by default an [Input](/components/input) component and is based on the `ui.input` preset. You can use most of the `Input` props to configure the display such as [color](/components/input#style), [variant](/components/input#style), [size](/components/input#size), [placeholder](/components/input#placeholder), [icon](/components/input#icon), [disabled](/components/input#disabled), etc.
|
||||
|
||||
You can use the `ui` prop like the `Input` component to override the default config. The `uiMenu` prop can be used to override the default menu config.
|
||||
|
||||
@@ -27,7 +27,7 @@ componentProps:
|
||||
::
|
||||
|
||||
::callout{icon="i-heroicons-exclamation-triangle"}
|
||||
This component does not support multiple values. Use the [SelectMenu](/forms/select-menu#multiple) component instead.
|
||||
This component does not support multiple values. Use the [SelectMenu](/components/select-menu#multiple) component instead.
|
||||
::
|
||||
|
||||
### Objects
|
||||
@@ -95,7 +95,7 @@ excludedProps:
|
||||
::
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
Learn how to customize icons from the [Input](/forms/input#icon) component.
|
||||
Learn how to customize icons from the [Input](/components/input#icon) component.
|
||||
::
|
||||
|
||||
## Searchable
|
||||
@@ -71,7 +71,7 @@ props:
|
||||
|
||||
Use the `type` prop to change the input type, the default `type` is set to `text`, you can check all the available types at [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types).
|
||||
|
||||
We have improved the implementation of certain types such as [Checkbox](/forms/checkbox), [Radio](/forms/radio-group), etc.
|
||||
We have improved the implementation of certain types such as [Checkbox](/components/checkbox), [Radio](/components/radio-group), etc.
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -197,7 +197,7 @@ baseProps:
|
||||
[EUR]{class="text-gray-500 dark:text-gray-400 text-xs"}
|
||||
::
|
||||
|
||||
You can for example create a clearable Input by injecting a [Button](/elements/button) in the `trailing` slot that displays when some text is entered.
|
||||
You can for example create a clearable Input by injecting a [Button](/components/button) in the `trailing` slot that displays when some text is entered.
|
||||
|
||||
:component-example{component="input-example-clearable"}
|
||||
|
||||
@@ -20,7 +20,7 @@ The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
to: /elements/link
|
||||
to: /components/link
|
||||
activeClass: 'text-primary'
|
||||
inactiveClass: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
|
||||
code: ' Link '
|
||||
@@ -31,7 +31,7 @@ Link
|
||||
|
||||
It also renders an `<a>` tag when a `to` prop is provided, otherwise it defaults to rendering a `<button>` tag. The default behavior can be customized using the `as` prop.
|
||||
|
||||
It is used underneath by the [Button](/elements/button), [Dropdown](/elements/dropdown) and [VerticalNavigation](/navigation/vertical-navigation) components.
|
||||
It is used underneath by the [Button](/components/button), [Dropdown](/components/dropdown) and [VerticalNavigation](/components/vertical-navigation) components.
|
||||
|
||||
## Props
|
||||
|
||||
@@ -19,7 +19,7 @@ props:
|
||||
::
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
Check out the [Range](/forms/range) component for inputs
|
||||
Check out the [Range](/components/range) component for inputs
|
||||
::
|
||||
|
||||
### Min & Max
|
||||
@@ -15,7 +15,7 @@ Use a `v-model` to control the Modal state.
|
||||
|
||||
:component-example{component="modal-example-basic"}
|
||||
|
||||
You can put a [Card](/layout/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:
|
||||
You can put a [Card](/components/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:
|
||||
|
||||
:component-example{component="modal-example-card"}
|
||||
|
||||
@@ -114,7 +114,7 @@ excludedProps:
|
||||
|
||||
### Avatar
|
||||
|
||||
Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props.
|
||||
Use the [avatar](/components/avatar) prop as an `object` and configure it with any of its props.
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -188,7 +188,7 @@ Use the `callback` prop to execute a function when the Notification expires.
|
||||
|
||||
Use the `close-button` prop to hide or customize the close button on the Notification.
|
||||
|
||||
You can pass all the props of the [Button](/elements/button) component to customize it through the `close-button` prop or globally through `ui.notification.default.closeButton`.
|
||||
You can pass all the props of the [Button](/components/button) component to customize it through the `close-button` prop or globally through `ui.notification.default.closeButton`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -216,7 +216,7 @@ Use the `actions` prop to add actions to the Notification.
|
||||
|
||||
:component-example{component="notification-example-actions"}
|
||||
|
||||
Like for `closeButton`, you can pass all the props of the [Button](/elements/button) component inside the action or globally through `ui.notification.default.actionButton`.
|
||||
Like for `closeButton`, you can pass all the props of the [Button](/components/button) component inside the action or globally through `ui.notification.default.actionButton`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -19,7 +19,7 @@ props:
|
||||
::
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
Check out the [Range](/forms/range) component for forms.
|
||||
Check out the [Range](/components/range) component for forms.
|
||||
::
|
||||
|
||||
### Max
|
||||
@@ -12,7 +12,7 @@ links:
|
||||
|
||||
## Usage
|
||||
|
||||
The `SelectMenu` component renders by default a [Select](/forms/select) component and is based on the `ui.select` preset. You can use most of the `Select` props to configure the display if you don't want to override the default slot such as [color](/forms/select#style), [variant](/forms/select#style), [size](/forms/select#size), [placeholder](/forms/select#placeholder), [icon](/forms/select#icon), [disabled](/forms/select#disabled), etc.
|
||||
The `SelectMenu` component renders by default a [Select](/components/select) component and is based on the `ui.select` preset. You can use most of the `Select` props to configure the display if you don't want to override the default slot such as [color](/components/select#style), [variant](/components/select#style), [size](/components/select#size), [placeholder](/components/select#placeholder), [icon](/components/select#icon), [disabled](/components/select#disabled), etc.
|
||||
|
||||
You can use the `ui` prop like the `Select` component to override the default config. The `uiMenu` prop can be used to override the default menu config.
|
||||
|
||||
@@ -78,7 +78,7 @@ excludedProps:
|
||||
::
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
Learn how to customize icons from the [Select](/forms/select#icon) component.
|
||||
Learn how to customize icons from the [Select](/components/select#icon) component.
|
||||
::
|
||||
|
||||
## Searchable
|
||||
@@ -8,7 +8,7 @@ links:
|
||||
|
||||
## Usage
|
||||
|
||||
The Select component is a wrapper around the native `<select>` HTML element. For more advanced use cases like searching or multiple selection, consider using the [SelectMenu](/forms/select-menu) component.
|
||||
The Select component is a wrapper around the native `<select>` HTML element. For more advanced use cases like searching or multiple selection, consider using the [SelectMenu](/components/select-menu) component.
|
||||
|
||||
Use a `v-model` to make the Select reactive alongside the `options` prop to pass an array of strings or objects.
|
||||
|
||||
@@ -15,7 +15,7 @@ Use a `v-model` to control the Slideover state.
|
||||
|
||||
:component-example{component="slideover-example-basic"}
|
||||
|
||||
You can put a [Card](/layout/card) component inside your Slideover to handle forms and take advantage of `header` and `footer` slots:
|
||||
You can put a [Card](/components/card) component inside your Slideover to handle forms and take advantage of `header` and `footer` slots:
|
||||
|
||||
:component-example{component="slideover-example-card"}
|
||||
|
||||
@@ -6,10 +6,6 @@ links:
|
||||
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/data/Table.vue
|
||||
---
|
||||
|
||||
::callout{icon="i-heroicons-puzzle-piece" to="/getting-started/examples#table"}
|
||||
Check out an example of a Table with advanced features like sorting, pagination, search, etc.
|
||||
::
|
||||
|
||||
## Usage
|
||||
|
||||
Use the `rows` prop to set the data to display in the table. By default, the table will display all the fields of the rows.
|
||||
@@ -43,7 +39,7 @@ componentProps:
|
||||
---
|
||||
::
|
||||
|
||||
You can easily use the [SelectMenu](/forms/select-menu) component to change the columns to display.
|
||||
You can easily use the [SelectMenu](/components/select-menu) component to change the columns to display.
|
||||
|
||||
::component-example{class="grid"}
|
||||
---
|
||||
@@ -54,6 +50,19 @@ componentProps:
|
||||
---
|
||||
::
|
||||
|
||||
You can apply styles to `tr` and `td` elements by passing a `class` to rows.
|
||||
|
||||
Also, you can apply styles to `th` elements by passing a `class` to columns.
|
||||
|
||||
::component-example{class="grid"}
|
||||
---
|
||||
padding: false
|
||||
component: 'table-example-style'
|
||||
componentProps:
|
||||
class: 'w-full'
|
||||
---
|
||||
::
|
||||
|
||||
### Sortable
|
||||
|
||||
You can make the columns sortable by setting the `sortable` property to `true` in the column configuration.
|
||||
@@ -147,7 +156,7 @@ We pass a function to `useLazyFetch` here make the url reactive but you can use
|
||||
|
||||
#### Custom sorting
|
||||
|
||||
Use the `sort-button` prop to customize the sort button in the header. You can pass all the props of the [Button](/elements/button) component to customize it through this prop or globally through `ui.table.default.sortButton`. Its icon defaults to `i-heroicons-arrows-up-down-20-solid`.
|
||||
Use the `sort-button` prop to customize the sort button in the header. You can pass all the props of the [Button](/components/button) component to customize it through this prop or globally through `ui.table.default.sortButton`. Its icon defaults to `i-heroicons-arrows-up-down-20-solid`.
|
||||
|
||||
::component-card{class="grid"}
|
||||
---
|
||||
@@ -257,7 +266,7 @@ componentProps:
|
||||
|
||||
### Searchable
|
||||
|
||||
You can easily use the [Input](/forms/input) component to filter the rows.
|
||||
You can easily use the [Input](/components/input) component to filter the rows.
|
||||
|
||||
::component-example{class="grid"}
|
||||
---
|
||||
@@ -270,7 +279,7 @@ componentProps:
|
||||
|
||||
### Paginable
|
||||
|
||||
You can easily use the [Pagination](/navigation/pagination) component to paginate the rows.
|
||||
You can easily use the [Pagination](/components/pagination) component to paginate the rows.
|
||||
|
||||
::component-example{class="grid"}
|
||||
---
|
||||
@@ -362,21 +371,6 @@ excludedProps:
|
||||
---
|
||||
::
|
||||
|
||||
## Styling
|
||||
|
||||
You can apply styles to `tr` and `td` elements by passing a `class` to rows.
|
||||
|
||||
Also, you can apply styles to `th` elements by passing a `class` to columns.
|
||||
|
||||
::component-example{class="grid"}
|
||||
---
|
||||
padding: false
|
||||
component: 'table-example-style'
|
||||
componentProps:
|
||||
class: 'w-full'
|
||||
---
|
||||
::
|
||||
|
||||
## Slots
|
||||
|
||||
You can use slots to customize the header and data cells of the table.
|
||||
@@ -400,7 +394,7 @@ Even though you can customize the sort button as mentioned in the [Sortable](#so
|
||||
|
||||
Use the `#<column>-data` slot to customize the data cell of a column. You will have access to the `row`, `column` and `getRowData` properties in the slot scope.
|
||||
|
||||
You can for example create an extra column for actions with a [Dropdown](/elements/dropdown) component inside or change the color of the rows based on a selection.
|
||||
You can for example create an extra column for actions with a [Dropdown](/components/dropdown) component inside or change the color of the rows based on a selection.
|
||||
|
||||
::component-example{class="grid"}
|
||||
---
|
||||
@@ -444,3 +438,13 @@ componentProps:
|
||||
## Config
|
||||
|
||||
:component-preset
|
||||
|
||||
## Example
|
||||
|
||||
Here is an example of a Table component with all its features implemented.
|
||||
|
||||
:component-example{component="table-example-advanced" hiddenCode :padding="false" }
|
||||
|
||||
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue" target="_blank"}
|
||||
Take a look at the component!
|
||||
::
|
||||
@@ -15,18 +15,14 @@ Pass an array to the `links` prop of the VerticalNavigation component. Each link
|
||||
- `labelClass` - The class of the link label.
|
||||
- `icon` - The icon of the link.
|
||||
- `iconClass` - The class of the link icon.
|
||||
- `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/elements/avatar) component.
|
||||
- `badge` - A badge to display next to the label. You can pass all the props of the [Badge](/elements/badge) component.
|
||||
- `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/components/avatar) component.
|
||||
- `badge` - A badge to display next to the label. You can pass all the props of the [Badge](/components/badge) component.
|
||||
- `click` - The click handler of the link.
|
||||
|
||||
You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
|
||||
|
||||
:component-example{component="vertical-navigation-example"}
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
Learn how to build a Tailwind like vertical navigation in the [Examples](/getting-started/examples#verticalnavigation) page.
|
||||
::
|
||||
|
||||
## Sections
|
||||
|
||||
Group your navigation links into distinct sections, separated by a divider. You can do this by passing an array of arrays to the `links` prop of the VerticalNavigation component.
|
||||
@@ -68,3 +64,9 @@ Use the `#badge` slot to customize the link badge. You will have access to the `
|
||||
## Config
|
||||
|
||||
:component-preset
|
||||
|
||||
## Example
|
||||
|
||||
Here is an example illustrating how you can customize the appearance of the `VerticalNavigation` component by utilizing its `ui` prop.
|
||||
|
||||
:component-example{component="vertical-navigation-example-theme-tailwind"}
|
||||
@@ -62,64 +62,130 @@ sections:
|
||||
height: 160
|
||||
orientation: 'horizontal'
|
||||
links:
|
||||
- label: Explore docs
|
||||
to: /getting-started/theming
|
||||
- label: Explore 40+ components
|
||||
to: /components
|
||||
color: black
|
||||
size: lg
|
||||
icon: i-heroicons-cube
|
||||
- label: Star on GitHub
|
||||
to: https://github.com/nuxt/ui
|
||||
target: _blank
|
||||
color: white
|
||||
size: lg
|
||||
trailingIcon: i-heroicons-arrow-right-20-solid
|
||||
- title: 'A collection of <span class="text-primary">40+</span> components'
|
||||
description: 'Get access to 40+ beautifully designed and fully customizable components built for Nuxt. These components<br class="hidden lg:block"> are updated regularly to ensure that you always have the latest features and functionalities.'
|
||||
class: 'dark:bg-gradient-to-b from-gray-950/50 to-gray-900'
|
||||
slot: categories
|
||||
links:
|
||||
- label: Explore components
|
||||
to: /elements/accordion
|
||||
color: white
|
||||
size: lg
|
||||
trailingIcon: i-heroicons-arrow-right-20-solid
|
||||
categories:
|
||||
- label: Elements
|
||||
to: /elements/dropdown
|
||||
image:
|
||||
path: /illustrations/elements
|
||||
badge: 15
|
||||
- label: Forms
|
||||
to: /forms/form
|
||||
image:
|
||||
path: /illustrations/forms
|
||||
badge: 12
|
||||
- label: Data
|
||||
to: /data/table
|
||||
image:
|
||||
path: /illustrations/data
|
||||
badge: 1
|
||||
- label: Navigation
|
||||
to: /navigation/command-palette
|
||||
image:
|
||||
path: /illustrations/navigation
|
||||
badge: 5
|
||||
- label: Overlays
|
||||
to: /overlays/modal
|
||||
image:
|
||||
path: /illustrations/overlays
|
||||
badge: 7
|
||||
- label: Layout
|
||||
to: /layout/card
|
||||
image:
|
||||
path: /illustrations/layout
|
||||
badge: 4
|
||||
icon: i-simple-icons-github
|
||||
cta:
|
||||
title: Trusted and supported by our<br class="hidden lg:block"> amazing community
|
||||
pro:
|
||||
title: 'Upgrade to <span class="text-primary">UI Pro</span> for more components'
|
||||
description: 'Nuxt UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentation, blogs, changelog, dashboards or entire SaaS products.'
|
||||
image:
|
||||
path: /illustrations/pro
|
||||
width: 1216
|
||||
height: 424
|
||||
title: Upgrade to <span class="text-primary">Nuxt UI Pro</span>
|
||||
description: 'Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.'
|
||||
links:
|
||||
- label: Explore Pro
|
||||
to: /pro
|
||||
color: white
|
||||
- label: View plans
|
||||
to: /pro/pricing
|
||||
color: gray
|
||||
icon: i-heroicons-credit-card
|
||||
size: lg
|
||||
trailingIcon: i-heroicons-arrow-right-20-solid
|
||||
- label: Explore templates
|
||||
to: /pro/templates
|
||||
color: gray
|
||||
icon: i-heroicons-computer-desktop
|
||||
size: lg
|
||||
sections:
|
||||
- title: The freedom to build anything
|
||||
description: Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility.
|
||||
id: features
|
||||
align: left
|
||||
features:
|
||||
- name: Fully customizable
|
||||
description: Like Nuxt UI, change the style of any component from your App Config or customize them specifically through the ui prop.
|
||||
icon: i-heroicons-wrench-screwdriver
|
||||
- name: Slots for everything
|
||||
description: Each component leverages the power of Vue's slots to give you the flexibility to build anything.
|
||||
icon: i-heroicons-square-3-stack-3d
|
||||
- name: Responsive by design
|
||||
description: Nuxt UI Pro components aims to structure your content, they are responsive by design and will adapt to any screen size.
|
||||
icon: i-heroicons-device-phone-mobile
|
||||
links:
|
||||
- label: Explore components
|
||||
to: /pro/components
|
||||
color: gray
|
||||
icon: i-heroicons-arrow-right-20-solid
|
||||
trailing: true
|
||||
size: md
|
||||
class: ml-8
|
||||
code: |
|
||||
```vue [app.vue]
|
||||
<script setup lang="ts">
|
||||
const links = [
|
||||
{ to: '/', label: 'Home' },
|
||||
{ to: '/about', label: 'About' },
|
||||
{ to: '/contact', label: 'Contact' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UHeader :links="links" />
|
||||
|
||||
<UMain>
|
||||
<ULandingHero title="Hello World" />
|
||||
|
||||
<ULandingSection title="Features">
|
||||
<UPageGrid>
|
||||
<ULandingCard title="First Card" />
|
||||
<ULandingCard title="Second Card" />
|
||||
<ULandingCard title="Third Card" />
|
||||
</UPageGrid>
|
||||
</ULandingSection>
|
||||
</UMain>
|
||||
|
||||
<UFooter />
|
||||
</template>
|
||||
```
|
||||
- title: The flexibility to control your data
|
||||
description: Although you can use any data source you want, Nuxt UI Pro is fully integrated with Nuxt Content and provides additional features when the module is detected.
|
||||
align: right
|
||||
features:
|
||||
- name: 'Write Markdown with ease'
|
||||
description: Nuxt UI Pro overrides Nuxt Content prose components to make them awesome but also adds new ones like Callout, CodeGroup, Field, etc.
|
||||
icon: i-simple-icons-markdown
|
||||
- name: 'Beautiful Typography styles'
|
||||
description: Tailwind CSS typography plugin is pre-configured and styled to match Nuxt UI components and colors.
|
||||
icon: i-heroicons-paint-brush
|
||||
- name: Full-Text Search out of the box
|
||||
description: 'Nuxt UI Pro ships with a ready to use command palette component. No need to setup Algolia DocSearch anymore.'
|
||||
icon: i-heroicons-magnifying-glass
|
||||
links:
|
||||
- label: Nuxt Content integration
|
||||
to: /pro/getting-started/content
|
||||
color: gray
|
||||
icon: i-heroicons-arrow-right-20-solid
|
||||
trailing: true
|
||||
size: md
|
||||
class: ml-8
|
||||
code: |
|
||||
```vue [pages/\[...slug\\].vue]
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
|
||||
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UPage>
|
||||
<UPageHeader :title="page.title" :description="page.description" :links="page.links" />
|
||||
|
||||
<UPageBody prose>
|
||||
<ContentRenderer v-if="page.body" :value="page" />
|
||||
</UPageBody>
|
||||
|
||||
<template #right>
|
||||
<UDocsToc :links="page.body.toc.links" />
|
||||
</template>
|
||||
</UPage>
|
||||
</template>
|
||||
```
|
||||
landing:
|
||||
title: Start with a landing page
|
||||
description: Stop wasting time building another landing page, Nuxt UI Pro flexible components will allow you to focus on your content.
|
||||
docs:
|
||||
title: Build your docs in seconds
|
||||
description: Whether you're creating documentation for your open source project or explaining your product, Nuxt UI Pro has you covered.
|
||||
|
||||
Reference in New Issue
Block a user