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

docs: improve

Browse Source
This commit is contained in:
Benjamin Canac
2024-06-19 21:23:23 +02:00
parent dc1913b40d
commit 11ef256db7
19 changed files with 368 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/app/app.vue
View File

@@ -38,7 +38,7 @@ const links = computed(() => [{
useHead({ useHead({
meta: [ meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }
// { key: 'theme-color', name: 'theme-color', content: color } // { key: 'theme-color', name: 'theme-color', content: color }
], ],
link: [ link: [
@@ -74,6 +74,6 @@ provide('files', files)
<Footer v-if="!route.path.startsWith('/examples')" /> <Footer v-if="!route.path.startsWith('/examples')" />
<LazyUContentSearch v-model:open="open" v-model:search-term="searchTerm" :files="files" :navigation="navigation" :links="links" :fuse="{ resultLimit: 42 }" /> <LazyUContentSearch v-model:open="open" v-model:search-term="searchTerm" :files="files" :navigation="navigation" :fuse="{ resultLimit: 42 }" />
</UApp> </UApp>
</template> </template>

68
docs/app/components/Footer.vue
View File

@@ -1,21 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
const route = useRoute() const route = useRoute()
const items = [{ // const items = [{
label: 'Figma Kit', // label: 'Figma Kit',
to: 'https://www.figma.com/community/file/1288455405058138934', // to: 'https://www.figma.com/community/file/1288455405058138934',
target: '_blank' // target: '_blank'
}, { // }, {
label: 'Playground', // label: 'Playground',
to: 'https://stackblitz.com/edit/nuxt-ui', // to: 'https://stackblitz.com/edit/nuxt-ui',
target: '_blank' // target: '_blank'
}, { // }, {
label: 'Roadmap', // label: 'Roadmap',
to: '/roadmap' // to: '/roadmap'
}, { // }, {
label: 'Releases', // label: 'Releases',
to: '/releases' // to: '/releases'
}] // }]
</script> </script>
<template> <template>
@@ -31,13 +31,41 @@ const items = [{
</NuxtLink> </NuxtLink>
</template> </template>
<UNavigationMenu :items="items" variant="link" color="black" /> <!-- <UNavigationMenu :items="items" variant="link" color="black" /> -->
<template #right> <template #right>
<UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" color="gray" variant="ghost" /> <UButton
<UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://chat.nuxt.dev" target="_blank" color="gray" variant="ghost" /> aria-label="Nuxt Website"
<UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" color="gray" variant="ghost" /> icon="i-simple-icons-nuxtdotjs"
<UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" color="gray" variant="ghost" /> to="https://nuxt.com"
target="_blank"
color="gray"
variant="ghost"
/>
<UButton
aria-label="Nuxt UI on Discord"
icon="i-simple-icons-discord"
to="https://chat.nuxt.dev"
target="_blank"
color="gray"
variant="ghost"
/>
<UButton
aria-label="Nuxt on X"
icon="i-simple-icons-x"
to="https://x.com/nuxt_js"
target="_blank"
color="gray"
variant="ghost"
/>
<UButton
aria-label="Nuxt UI on GitHub"
icon="i-simple-icons-github"
to="https://github.com/nuxt/ui"
target="_blank"
color="gray"
variant="ghost"
/>
</template> </template>
</UFooter> </UFooter>
</template> </template>

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

@@ -1,29 +0,0 @@
---
title: Introduction
description: 'Fully styled and customizable components for Nuxt.'
---
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.
Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode as well as keyboard shortcuts.
## Features
- Built with [Headless UI](https://headlessui.dev/) and [Tailwind CSS](https://tailwindcss.com/)
- HMR support through Nuxt App Config
- Dark mode support
- Support for LTR and RTL languages
- Keyboard shortcuts
- Bundled icons
- Fully typed
- [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
## Credits
- [nuxt/nuxt](https://github.com/nuxt/nuxt)
- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
- [nuxt-modules/tailwindcss](https://github.com/nuxt-modules/tailwindcss)
- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
- [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui)
- [vueuse/vueuse](https://github.com/vueuse/vueuse)
- [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons)

286
docs/app/content/1.getting-started/3.theming.md
View File

@@ -66,42 +66,6 @@ We'd advise you to use those colors in your components and pages, e.g. `text-pri
The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc. The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc.
### Smart Safelisting
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.
The module uses the [Tailwind CSS safelist](https://tailwindcss.com/docs/content-configuration#safelisting-classes) feature to force the generation of all the classes for the `primary` color **only** as it is the default color for all the components.
Then, the module will automatically detect when you use one of those components with a color and will safelist it for you. This means that if you use a `red` color for a Button component, the `red` color classes will be safelisted for the Button component only. This will allow to keep the CSS bundle size as small as possible.
There is one case where you would want to force the safelisting of a color. For example, if you've set the default color of the Button component to `orange` in your `app.config.ts`.
```ts [app.config.ts]
export default defineAppConfig({
ui: {
button: {
default: {
color: 'orange'
}
}
}
})
```
This will apply the orange color when using a default `<UButton />`. You'll need to safelist this color manually in your `nuxt.config.ts` ui options as we won't be able to detect it automatically. You can do so through the `safelistColors` option which defaults to `['primary']`.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
ui: {
safelistColors: ['orange']
}
})
```
This can also happen when you bind a dynamic color to a component: `<UBadge :color="color" />`, `<UAvatar :chip-color="statuses[user.status]" />`, etc. In this case, you'll need to safelist the possible color values manually as well.
## Components ## Components
### `app.config.ts` ### `app.config.ts`
@@ -218,253 +182,3 @@ export default defineAppConfig({
} }
}) })
``` ```
## Dark mode
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.
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'
}
})
```
::callout{icon="i-heroicons-light-bulb"}
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 lang="ts">
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/).
Some components have an `icon` prop that allows you to add an icon to the component.
```vue
<template>
<UButton icon="i-heroicons-magnifying-glass" />
</template>
```
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>
<UIcon name="i-heroicons-moon" />
</template>
```
### Collections
By default, the module uses [Heroicons](https://heroicons.com/) but you can change it from the module options in your `nuxt.config.ts`.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
ui: {
icons: ['mdi', 'simple-icons']
}
})
```
::callout{icon="i-heroicons-light-bulb"}
Search the icon you want to use on https://icones.js.org built by [@antfu](https://github.com/antfu).
::
Thanks to [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons) plugin, only the icons you use in your app will be bundled in your CSS. However, you need to install the icon collections you specified in the `ui.icons` key:
::code-group
```bash [pnpm]
pnpm i @iconify-json/{collection_name}
```
```bash [yarn]
yarn add @iconify-json/{collection_name}
```
```bash [npm]
npm install @iconify-json/{collection_name}
```
::
If you choose to use the full `@iconify/json` icon collection (50MB), you can specifiy `icons: 'all'` or `icons: {}` in your `nuxt.config.ts` to use any icon in your app.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
ui: {
icons: {}
}
})
```
### Custom config
If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
```ts [nuxt.config.ts]
import { getIconCollections } from '@egoist/tailwindcss-icons'
export default defineNuxtConfig({
ui: {
icons: {
// might solve stretch bug on generate, see https://github.com/egoist/tailwindcss-icons/issues/23
extraProperties: {
'mask-size': 'contain',
'mask-position': 'center'
},
collections: {
foo: {
icons: {
'arrow-left': {
// svg body
body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />',
// svg width and height, optional
width: 24,
height: 24
}
}
},
...getIconCollections(['heroicons', 'simple-icons'])
}
}
}
})
```
### Dynamic icons
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](/components/icon#dynamic) component page.
### Defaults
You can easily replace all the default icons of the components in your `app.config.ts`.
```ts [app.config.ts]
export default defineAppConfig({
ui: {
button: {
default: {
loadingIcon: 'i-octicon-sync-24'
}
},
input: {
default: {
loadingIcon: 'i-octicon-sync-24'
}
},
select: {
default: {
loadingIcon: 'i-octicon-sync-24',
trailingIcon: 'i-octicon-chevron-down-24'
}
},
selectMenu: {
default: {
selectedIcon: 'i-octicon-check-24'
}
},
notification: {
default: {
closeButton: {
icon: 'i-octicon-x-24'
}
}
},
commandPalette: {
default: {
icon: 'i-octicon-search-24',
loadingIcon: 'i-octicon-sync-24',
selectedIcon: 'i-octicon-check-24',
emptyState: {
icon: 'i-octicon-search-24'
}
}
},
table: {
default: {
sortAscIcon: 'i-octicon-sort-asc-24',
sortDescIcon: 'i-octicon-sort-desc-24',
sortButton: {
icon: 'i-octicon-arrow-switch-24'
},
loadingState: {
icon: 'i-octicon-sync-24'
},
emptyState: {
icon: 'i-octicon-database-24'
}
}
},
pagination: {
default: {
firstButton: {
icon: 'i-octicon-chevron-left-24'
},
prevButton: {
icon: 'i-octicon-arrow-left-24'
},
nextButton: {
icon: 'i-octicon-arrow-right-24'
},
lastButton: {
icon: 'i-octicon-chevron-right-24'
}
}
},
accordion: {
default: {
openIcon: 'i-octicon-chevron-down-24'
}
},
breadcrumb: {
default: {
divider: 'i-octicon-chevron-right-24'
}
}
}
})
```

195
docs/app/content/1.getting-started/4.icons.md Normal file
View File

@@ -0,0 +1,195 @@
---
description: ''
---
You can use any icon (100,000+) from [Iconify](https://iconify.design/).
Some components have an `icon` prop that allows you to add an icon to the component.
```vue
<template>
<UButton icon="i-heroicons-magnifying-glass" />
</template>
```
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>
<UIcon name="i-heroicons-moon" />
</template>
```
### Collections
By default, the module uses [Heroicons](https://heroicons.com/) but you can change it from the module options in your `nuxt.config.ts`.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
ui: {
icons: ['mdi', 'simple-icons']
}
})
```
::callout{icon="i-heroicons-light-bulb"}
Search the icon you want to use on https://icones.js.org built by [@antfu](https://github.com/antfu).
::
Thanks to [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons) plugin, only the icons you use in your app will be bundled in your CSS. However, you need to install the icon collections you specified in the `ui.icons` key:
::code-group
```bash [pnpm]
pnpm i @iconify-json/{collection_name}
```
```bash [yarn]
yarn add @iconify-json/{collection_name}
```
```bash [npm]
npm install @iconify-json/{collection_name}
```
::
If you choose to use the full `@iconify/json` icon collection (50MB), you can specifiy `icons: 'all'` or `icons: {}` in your `nuxt.config.ts` to use any icon in your app.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
ui: {
icons: {}
}
})
```
### Custom config
If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
```ts [nuxt.config.ts]
import { getIconCollections } from '@egoist/tailwindcss-icons'
export default defineNuxtConfig({
ui: {
icons: {
// might solve stretch bug on generate, see https://github.com/egoist/tailwindcss-icons/issues/23
extraProperties: {
'mask-size': 'contain',
'mask-position': 'center'
},
collections: {
foo: {
icons: {
'arrow-left': {
// svg body
body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />',
// svg width and height, optional
width: 24,
height: 24
}
}
},
...getIconCollections(['heroicons', 'simple-icons'])
}
}
}
})
```
### Dynamic icons
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](/components/icon#dynamic) component page.
### Defaults
You can easily replace all the default icons of the components in your `app.config.ts`.
```ts [app.config.ts]
export default defineAppConfig({
ui: {
button: {
default: {
loadingIcon: 'i-octicon-sync-24'
}
},
input: {
default: {
loadingIcon: 'i-octicon-sync-24'
}
},
select: {
default: {
loadingIcon: 'i-octicon-sync-24',
trailingIcon: 'i-octicon-chevron-down-24'
}
},
selectMenu: {
default: {
selectedIcon: 'i-octicon-check-24'
}
},
notification: {
default: {
closeButton: {
icon: 'i-octicon-x-24'
}
}
},
commandPalette: {
default: {
icon: 'i-octicon-search-24',
loadingIcon: 'i-octicon-sync-24',
selectedIcon: 'i-octicon-check-24',
emptyState: {
icon: 'i-octicon-search-24'
}
}
},
table: {
default: {
sortAscIcon: 'i-octicon-sort-asc-24',
sortDescIcon: 'i-octicon-sort-desc-24',
sortButton: {
icon: 'i-octicon-arrow-switch-24'
},
loadingState: {
icon: 'i-octicon-sync-24'
},
emptyState: {
icon: 'i-octicon-database-24'
}
}
},
pagination: {
default: {
firstButton: {
icon: 'i-octicon-chevron-left-24'
},
prevButton: {
icon: 'i-octicon-arrow-left-24'
},
nextButton: {
icon: 'i-octicon-arrow-right-24'
},
lastButton: {
icon: 'i-octicon-chevron-right-24'
}
}
},
accordion: {
default: {
openIcon: 'i-octicon-chevron-down-24'
}
},
breadcrumb: {
default: {
divider: 'i-octicon-chevron-right-24'
}
}
}
})
```

58
docs/app/content/1.getting-started/5.dark-mode.md Normal file
View File

@@ -0,0 +1,58 @@
---
title: 'Dark mode'
description: ''
---
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.
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'
}
})
```
::callout{icon="i-heroicons-light-bulb"}
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 lang="ts">
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>
```
::

0
docs/app/content/1.getting-started/4.shortcuts.md → docs/app/content/1.getting-started/6.shortcuts.md
View File

0
docs/app/content/1.getting-started/6.contributing.md → docs/app/content/1.getting-started/7.contributing.md
View File

2
docs/app/content/2.components/carousel.md
View File

@@ -4,6 +4,8 @@ links:
- label: GitHub - label: GitHub
icon: i-simple-icons-github icon: i-simple-icons-github
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Carousel.vue to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Carousel.vue
disabled: true
badge: Coming soon
--- ---
## Usage ## Usage

17
docs/app/content/2.components/collapsible.md Normal file
View File

@@ -0,0 +1,17 @@
---
description: A container lets you center and constrain the width of your content.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Container.vue
---
## Usage
## Props
:component-props
## Config
:component-preset

0
docs/app/content/2.components/form-group.md → docs/app/content/2.components/form-field.md
View File

1
docs/app/content/2.components/meter.md
View File

@@ -5,6 +5,7 @@ links:
- label: GitHub - label: GitHub
icon: i-simple-icons-github icon: i-simple-icons-github
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Meter.vue to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Meter.vue
badge: Coming soon
--- ---
## Usage ## Usage

0
docs/app/content/2.components/horizontal-navigation.md → docs/app/content/2.components/navigation-menu.md
View File

0
docs/app/content/2.components/divider.md → docs/app/content/2.components/separator.md
View File

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

@@ -5,7 +5,7 @@ const nav = inject<Ref<NavItem[]>>('navigation')
const navigation = computed(() => nav.value.filter(item => !item._path.startsWith('/pro'))) const navigation = computed(() => nav.value.filter(item => !item._path.startsWith('/pro')))
const { module, modules } = useModule() // const { module, modules } = useModule()
</script> </script>
<template> <template>
@@ -14,7 +14,7 @@ const { module, modules } = useModule()
<UPage> <UPage>
<template #left> <template #left>
<UPageAside> <UPageAside>
<USelect v-model="module" :items="modules" icon="i-heroicons-cube" class="w-full mb-3 lg:mb-6" /> <!-- <USelect v-model="module" :items="modules" icon="i-heroicons-cube" class="w-full mb-3 lg:mb-6" /> -->
<UContentNavigation :navigation="navigation" highlight /> <UContentNavigation :navigation="navigation" highlight />
</UPageAside> </UPageAside>

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

@@ -35,49 +35,46 @@ useSeoMeta({
ogDescription: page.value.description ogDescription: page.value.description
}) })
defineOgImage({ defineOgImageComponent('Docs', {
component: 'Docs',
title: page.value.title,
description: page.value.description,
headline: headline.value headline: headline.value
}) })
const communityLinks = computed(() => [{ // const communityLinks = computed(() => [{
icon: 'i-heroicons-pencil-square', // icon: 'i-heroicons-pencil-square',
label: 'Edit this page', // label: 'Edit this page',
to: `https://github.com/nuxt/ui/edit/dev/docs/content/${page?.value?._file}`, // to: `https://github.com/nuxt/ui/edit/dev/docs/content/${page?.value?._file}`,
target: '_blank' // target: '_blank'
}, { // }, {
icon: 'i-heroicons-star', // icon: 'i-heroicons-star',
label: 'Star on GitHub', // label: 'Star on GitHub',
to: 'https://github.com/nuxt/ui', // to: 'https://github.com/nuxt/ui',
target: '_blank' // target: '_blank'
}, { // }, {
icon: 'i-heroicons-lifebuoy', // icon: 'i-heroicons-lifebuoy',
label: 'Contributing', // label: 'Contributing',
to: '/getting-started/contributing' // to: '/getting-started/contributing'
}, { // }, {
label: 'Roadmap', // label: 'Roadmap',
icon: 'i-heroicons-map', // icon: 'i-heroicons-map',
to: '/roadmap' // to: '/roadmap'
}]) // }])
const resourcesLinks = [{ // const resourcesLinks = [{
icon: 'i-simple-icons-figma', // icon: 'i-simple-icons-figma',
label: 'Figma Kit', // label: 'Figma Kit',
to: 'https://www.figma.com/community/file/1288455405058138934', // to: 'https://www.figma.com/community/file/1288455405058138934',
target: '_blank' // target: '_blank'
}, { // }, {
label: 'Playground', // label: 'Playground',
icon: 'i-simple-icons-stackblitz', // icon: 'i-simple-icons-stackblitz',
to: 'https://stackblitz.com/edit/nuxt-ui', // to: 'https://stackblitz.com/edit/nuxt-ui',
target: '_blank' // target: '_blank'
}, { // }, {
icon: 'i-simple-icons-nuxtdotjs', // icon: 'i-simple-icons-nuxtdotjs',
label: 'Nuxt docs', // label: 'Nuxt docs',
to: 'https://nuxt.com', // to: 'https://nuxt.com',
target: '_blank' // target: '_blank'
}] // }]
</script> </script>
<template> <template>
@@ -94,7 +91,7 @@ const resourcesLinks = [{
<template v-if="page?.body?.toc?.links?.length" #right> <template v-if="page?.body?.toc?.links?.length" #right>
<UContentToc :links="page.body.toc.links"> <UContentToc :links="page.body.toc.links">
<template #bottom> <!-- <template #bottom>
<USeparator v-if="page.body?.toc?.links?.length" type="dashed" /> <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
<UPageLinks title="Community" :links="communityLinks" /> <UPageLinks title="Community" :links="communityLinks" />
@@ -103,11 +100,11 @@ const resourcesLinks = [{
<UPageLinks title="Resources" :links="resourcesLinks" /> <UPageLinks title="Resources" :links="resourcesLinks" />
<!-- <USeparator type="dashed" /> <USeparator type="dashed" />
<AdsPro /> <AdsPro />
<AdsCarbon /> --> <AdsCarbon />
</template> </template> -->
</UContentToc> </UContentToc>
</template> </template>
</UPage> </UPage>

27
docs/app/pages/playground.vue
View File

@@ -1,27 +0,0 @@
<script setup lang="ts">
const title = 'Playground'
const description = 'Play online with our interactive Nuxt Image playground.'
useSeoMeta({
titleTemplate: '%s - Nuxt UI',
title,
ogTitle: 'Nuxt UI Playground',
description
})
defineOgImage({
component: 'Docs',
title,
description
})
const colorMode = useColorMode()
</script>
<template>
<div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
<ClientOnly>
<iframe :src="`https://stackblitz.com/edit/nuxt-ui?embed=1&file=app.config.ts,app.vue&theme=${colorMode.preference}`" width="100%" height="100%" />
</ClientOnly>
</div>
</template>

32
docs/app/pages/roadmap.vue
View File

@@ -1,32 +0,0 @@
<script setup lang="ts">
const title = 'Roadmap'
const description = 'Discover our Volta board for @nuxt/ui development status.'
useSeoMeta({
titleTemplate: '%s - Nuxt UI',
title,
ogTitle: 'Nuxt UI Roadmap',
description
})
defineOgImage({
component: 'Docs',
title,
description
})
const appConfig = useAppConfig()
const colorMode = useColorMode()
const token = 'eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiXSwiYm9hcmRMaW5rZWRQcnMiOmZhbHNlLCJsaXN0R3JvdXAiOiJzdGF0ZSIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoibnV4dCIsIm5hbWUiOiJ1aSJ9'
const src = computed(() => `https://volta.net/embed/${token}?theme=${colorMode.value}&gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
</script>
<template>
<div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
<ClientOnly>
<iframe :src="src" width="100%" height="100%" />
</ClientOnly>
</div>
</template>

9
docs/nuxt.config.ts
View File

@@ -63,9 +63,7 @@ export default defineNuxtConfig({
nitro: { nitro: {
prerender: { prerender: {
routes: [ routes: [
'/', '/getting-started/installation',
'/getting-started',
'/dev/getting-started',
'/api/releases.json', '/api/releases.json',
'/api/pulls.json' '/api/pulls.json'
], ],
@@ -73,9 +71,8 @@ export default defineNuxtConfig({
} }
}, },
routeRules: { routeRules: {
'/': { redirect: '/getting-started', prerender: false }, '/': { redirect: '/getting-started/installation', prerender: false },
'/components': { redirect: '/components/app', prerender: false }, '/components': { redirect: '/components/app', prerender: false }
'/dev/components': { redirect: '/dev/components/app', prerender: false }
}, },
// componentMeta: { // componentMeta: {
// exclude: [ // exclude: [