mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-02-02 05:08:03 +01:00
chore: migrate to https://ui.nuxt.com and @nuxt/ui (#616)
This commit is contained in:
4
.github/ISSUE_TEMPLATE/bug-report.md
vendored
4
.github/ISSUE_TEMPLATE/bug-report.md
vendored
@@ -11,7 +11,7 @@ assignees: ''
|
|||||||
Before reporting a bug, please make sure that you have read through our documentation and you think your problem is indeed an issue related to our module. -->
|
Before reporting a bug, please make sure that you have read through our documentation and you think your problem is indeed an issue related to our module. -->
|
||||||
|
|
||||||
### Version
|
### Version
|
||||||
@nuxthq/ui: <!-- ex: v2.0.0 -->
|
@nuxt/ui: <!-- ex: v2.0.0 -->
|
||||||
nuxt: <!-- ex: v3.5.0 -->
|
nuxt: <!-- ex: v3.5.0 -->
|
||||||
|
|
||||||
### Reproduction Link
|
### Reproduction Link
|
||||||
@@ -19,7 +19,7 @@ nuxt: <!-- ex: v3.5.0 -->
|
|||||||
<!--
|
<!--
|
||||||
A minimal test case based on one of:
|
A minimal test case based on one of:
|
||||||
- a GitHub repository that can reproduce the bug
|
- a GitHub repository that can reproduce the bug
|
||||||
- https://stackblitz.com/edit/nuxtlabs-ui
|
- https://stackblitz.com/edit/nuxt-ui
|
||||||
-->
|
-->
|
||||||
|
|
||||||
### Steps to reproduce
|
### Steps to reproduce
|
||||||
|
|||||||
32
README.md
32
README.md
@@ -1,4 +1,4 @@
|
|||||||
[](https://ui.nuxtlabs.com)
|
[](https://ui.nuxt.com)
|
||||||
|
|
||||||
# Nuxt UI
|
# Nuxt UI
|
||||||
|
|
||||||
@@ -21,19 +21,19 @@ Is has been developed by [NuxtLabs](https://nuxtlabs.com/) for [Volta](https://v
|
|||||||
- Bundled icons
|
- Bundled icons
|
||||||
- Fully typed
|
- Fully typed
|
||||||
|
|
||||||
Read more on [ui.nuxtlabs.com](https://ui.nuxtlabs.com)
|
Read more on [ui.nuxt.com](https://ui.nuxt.com)
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Using npm
|
# Using npm
|
||||||
npm install @nuxthq/ui
|
npm install @nuxt/ui
|
||||||
|
|
||||||
# Using yarn
|
# Using yarn
|
||||||
yarn add @nuxthq/ui
|
yarn add @nuxt/ui
|
||||||
|
|
||||||
# Using pnpm
|
# Using pnpm
|
||||||
pnpm add @nuxthq/ui
|
pnpm add @nuxt/ui
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, register the module in your `nuxt.config.ts`:
|
Then, register the module in your `nuxt.config.ts`:
|
||||||
@@ -41,24 +41,24 @@ Then, register the module in your `nuxt.config.ts`:
|
|||||||
```js
|
```js
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
modules: [
|
modules: [
|
||||||
'@nuxthq/ui'
|
'@nuxt/ui'
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
If you want latest updates, please use `@nuxthq/ui-edge` in your `package.json`:
|
If you want latest updates, please use `@nuxt/ui-edge` in your `package.json`:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@nuxthq/ui": "npm:@nuxthq/ui-edge@latest"
|
"@nuxt/ui": "npm:@nuxt/ui-edge@latest"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Documentation
|
## Documentation
|
||||||
|
|
||||||
Visit https://ui.nuxtlabs.com to explore the documentation.
|
Visit https://ui.nuxt.com to explore the documentation.
|
||||||
|
|
||||||
## Credits
|
## Credits
|
||||||
|
|
||||||
@@ -72,17 +72,17 @@ Visit https://ui.nuxtlabs.com to explore the documentation.
|
|||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
Licensed under the [MIT license](https://github.com/nuxtlabs/ui/blob/dev/LICENSE.md).
|
Licensed under the [MIT license](https://github.com/nuxt/ui/blob/dev/LICENSE.md).
|
||||||
|
|
||||||
<!-- Badges -->
|
<!-- Badges -->
|
||||||
[npm-version-src]: https://img.shields.io/npm/v/@nuxthq/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
|
[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
|
||||||
[npm-version-href]: https://npmjs.com/package/@nuxthq/ui
|
[npm-version-href]: https://npmjs.com/package/@nuxt/ui
|
||||||
|
|
||||||
[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxthq/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
|
[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
|
||||||
[npm-downloads-href]: https://npmjs.com/package/@nuxthq/ui
|
[npm-downloads-href]: https://npmjs.com/package/@nuxt/ui
|
||||||
|
|
||||||
[license-src]: https://img.shields.io/github/license/nuxtlabs/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
|
[license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
|
||||||
[license-href]: https://github.com/nuxtlabs/ui/blob/main/LICENSE
|
[license-href]: https://github.com/nuxt/ui/blob/main/LICENSE
|
||||||
|
|
||||||
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
|
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
|
||||||
[nuxt-href]: https://nuxt.com
|
[nuxt-href]: https://nuxt.com
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ useHead({
|
|||||||
],
|
],
|
||||||
link: [
|
link: [
|
||||||
{ rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
|
{ rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
|
||||||
{ rel: 'canonical', href: `https://ui.nuxtlabs.com${withoutTrailingSlash(route.path)}` }
|
{ rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
|
||||||
],
|
],
|
||||||
htmlAttrs: {
|
htmlAttrs: {
|
||||||
lang: 'en'
|
lang: 'en'
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
|
|
||||||
<template #center>
|
<template #center>
|
||||||
<span class="text-sm text-gray-600 dark:text-gray-300">
|
<span class="text-sm text-gray-600 dark:text-gray-300">
|
||||||
Published under <NuxtLink to="https://github.com/nuxtlabs/ui" target="_blank" class="text-gray-900 dark:text-white">
|
Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
|
||||||
MIT License
|
MIT License
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</span>
|
</span>
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
<template #right>
|
<template #right>
|
||||||
<USocialButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" />
|
<USocialButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" />
|
||||||
<USocialButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxtlabs" />
|
<USocialButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxtlabs" />
|
||||||
<USocialButton aria-label="Nuxt Image on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui" />
|
<USocialButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" />
|
||||||
</template>
|
</template>
|
||||||
</UFooter>
|
</UFooter>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
|
|
||||||
<UColorModeButton v-if="!$colorMode.forced" />
|
<UColorModeButton v-if="!$colorMode.forced" />
|
||||||
|
|
||||||
<USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
|
<USocialButton to="https://github.com/nuxt/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #panel>
|
<template #panel>
|
||||||
@@ -54,12 +54,12 @@ const links = computed(() => {
|
|||||||
}, {
|
}, {
|
||||||
label: 'Playground',
|
label: 'Playground',
|
||||||
icon: 'i-simple-icons-stackblitz',
|
icon: 'i-simple-icons-stackblitz',
|
||||||
to: 'https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue',
|
to: 'https://stackblitz.com/edit/nuxt-ui?file=app.config.ts,app.vue',
|
||||||
target: '_blank'
|
target: '_blank'
|
||||||
}, {
|
}, {
|
||||||
label: 'Releases',
|
label: 'Releases',
|
||||||
icon: 'i-heroicons-rocket-launch-solid',
|
icon: 'i-heroicons-rocket-launch-solid',
|
||||||
to: 'https://github.com/nuxtlabs/ui/releases',
|
to: 'https://github.com/nuxt/ui/releases',
|
||||||
target: '_blank'
|
target: '_blank'
|
||||||
}]
|
}]
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ const items = [{
|
|||||||
Installation
|
Installation
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
Install <code>@nuxthq/ui</code> dependency to your project:
|
Install <code>@nuxt/ui</code> dependency to your project:
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
{{ description }}
|
{{ description }}
|
||||||
@@ -61,9 +61,9 @@ const items = [{
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<div class="flex flex-col items-center">
|
||||||
<code>$ npm install @nuxthq/ui</code>
|
<code>$ npm install @nuxt/ui</code>
|
||||||
<code>$ nnpm install -D @nuxthq/ui</code>
|
<code>$ nnpm install -D @nuxt/ui</code>
|
||||||
<code>$ pnpm i -D @nuxthq/ui</code>
|
<code>$ pnpm i -D @nuxt/ui</code>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</UAccordion>
|
</UAccordion>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import type { FormError, FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
|
import type { FormError, FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
|
||||||
|
|
||||||
const state = ref({
|
const state = ref({
|
||||||
email: undefined,
|
email: undefined,
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
|
import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
|
||||||
|
|
||||||
const options = [
|
const options = [
|
||||||
{ label: 'Option 1', value: 'option-1' },
|
{ label: 'Option 1', value: 'option-1' },
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import Joi from 'joi'
|
import Joi from 'joi'
|
||||||
import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
|
import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
|
||||||
|
|
||||||
const schema = Joi.object({
|
const schema = Joi.object({
|
||||||
email: Joi.string().required(),
|
email: Joi.string().required(),
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { object, string, InferType } from 'yup'
|
import { object, string, InferType } from 'yup'
|
||||||
import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
|
import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
|
||||||
|
|
||||||
const schema = object({
|
const schema = object({
|
||||||
email: string().email('Invalid email').required('Required'),
|
email: string().email('Invalid email').required('Required'),
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
|
import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
email: z.string().email('Invalid email'),
|
email: z.string().email('Invalid email'),
|
||||||
|
|||||||
@@ -4,20 +4,20 @@ description: 'Learn how to install and configure the module in your Nuxt app.'
|
|||||||
|
|
||||||
## Quick Start
|
## Quick Start
|
||||||
|
|
||||||
1. Install `@nuxthq/ui` dependency to your project:
|
1. Install `@nuxt/ui` dependency to your project:
|
||||||
|
|
||||||
::code-group
|
::code-group
|
||||||
|
|
||||||
```sh [pnpm]
|
```sh [pnpm]
|
||||||
pnpm i -D @nuxthq/ui
|
pnpm i -D @nuxt/ui
|
||||||
```
|
```
|
||||||
|
|
||||||
```bash [yarn]
|
```bash [yarn]
|
||||||
yarn add -D @nuxthq/ui
|
yarn add -D @nuxt/ui
|
||||||
```
|
```
|
||||||
|
|
||||||
```bash [npm]
|
```bash [npm]
|
||||||
npm install -D @nuxthq/ui
|
npm install -D @nuxt/ui
|
||||||
```
|
```
|
||||||
|
|
||||||
::
|
::
|
||||||
@@ -26,7 +26,7 @@ npm install -D @nuxthq/ui
|
|||||||
|
|
||||||
```ts [nuxt.config]
|
```ts [nuxt.config]
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
modules: ['@nuxthq/ui']
|
modules: ['@nuxt/ui']
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -128,7 +128,7 @@ Configure options in your `nuxt.config.ts` as such:
|
|||||||
|
|
||||||
```ts [nuxt.config.ts]
|
```ts [nuxt.config.ts]
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
modules: ['@nuxthq/ui'],
|
modules: ['@nuxt/ui'],
|
||||||
ui: {
|
ui: {
|
||||||
global: true,
|
global: true,
|
||||||
icons: ['mdi', 'simple-icons']
|
icons: ['mdi', 'simple-icons']
|
||||||
@@ -138,14 +138,14 @@ export default defineNuxtConfig({
|
|||||||
|
|
||||||
## Edge
|
## Edge
|
||||||
|
|
||||||
To use the latest updates pushed on the [`dev`](https://github.com/nuxtlabs/ui/tree/dev) branch, you can use `@nuxthq/ui-edge`.
|
To use the latest updates pushed on the [`dev`](https://github.com/nuxt/ui/tree/dev) branch, you can use `@nuxt/ui-edge`.
|
||||||
|
|
||||||
Update your `package.json` to the following:
|
Update your `package.json` to the following:
|
||||||
|
|
||||||
```json [package.json]
|
```json [package.json]
|
||||||
{
|
{
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@nuxthq/ui": "npm:@nuxthq/ui-edge@latest"
|
"@nuxt/ui": "npm:@nuxt/ui-edge@latest"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -79,7 +79,7 @@ This can also happen when you bind a dynamic color to a component: `<UBadge :col
|
|||||||
|
|
||||||
### `app.config.ts`
|
### `app.config.ts`
|
||||||
|
|
||||||
Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts) file. You can override those in your own `app.config.ts`.
|
Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/app.config.ts) file. You can override those in your own `app.config.ts`.
|
||||||
|
|
||||||
```ts [app.config.ts]
|
```ts [app.config.ts]
|
||||||
export default defineAppConfig({
|
export default defineAppConfig({
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ description: Discover some real-life examples of components you can build.
|
|||||||
---
|
---
|
||||||
|
|
||||||
::callout{icon="i-heroicons-wrench-screwdriver"}
|
::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/nuxtlabs/ui/issues/297).
|
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
|
## Components
|
||||||
@@ -147,7 +147,7 @@ padding: false
|
|||||||
:table-example-advanced
|
:table-example-advanced
|
||||||
::
|
::
|
||||||
|
|
||||||
::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue"}
|
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue"}
|
||||||
Take a look at the component!
|
Take a look at the component!
|
||||||
::
|
::
|
||||||
|
|
||||||
@@ -170,7 +170,7 @@ padding: false
|
|||||||
:command-palette-theme-algolia{class="max-h-[480px] rounded-md"}
|
:command-palette-theme-algolia{class="max-h-[480px] rounded-md"}
|
||||||
::
|
::
|
||||||
|
|
||||||
::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
|
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
|
||||||
Take a look at the component!
|
Take a look at the component!
|
||||||
::
|
::
|
||||||
|
|
||||||
@@ -185,7 +185,7 @@ padding: false
|
|||||||
:command-palette-theme-raycast{class="max-h-[480px] rounded-md"}
|
:command-palette-theme-raycast{class="max-h-[480px] rounded-md"}
|
||||||
::
|
::
|
||||||
|
|
||||||
::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
|
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
|
||||||
Take a look at the component!
|
Take a look at the component!
|
||||||
::
|
::
|
||||||
|
|
||||||
@@ -278,6 +278,6 @@ Here are some examples of how components look like in RTL mode.
|
|||||||
:pagination-example-r-t-l
|
:pagination-example-r-t-l
|
||||||
::
|
::
|
||||||
|
|
||||||
::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/examples/PaginationExampleRTL.vue"}
|
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/PaginationExampleRTL.vue"}
|
||||||
Take a look at the component!
|
Take a look at the component!
|
||||||
::
|
::
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Roadmap
|
title: Roadmap
|
||||||
description: Discover our Volta board for @nuxthq/ui development status.
|
description: Discover our Volta board for @nuxt/ui development status.
|
||||||
toc: false
|
toc: false
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display togglable accordion panels.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Accordion.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Accordion.vue
|
||||||
- label: Disclosure
|
- label: Disclosure
|
||||||
icon: i-simple-icons-headlessui
|
icon: i-simple-icons-headlessui
|
||||||
to: 'https://headlessui.com/vue/disclosure'
|
to: 'https://headlessui.com/vue/disclosure'
|
||||||
@@ -254,7 +254,7 @@ const items = [{
|
|||||||
Installation
|
Installation
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
Install <code>@nuxthq/ui</code> dependency to your project:
|
Install <code>@nuxt/ui</code> dependency to your project:
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
{{ description }}
|
{{ description }}
|
||||||
@@ -262,9 +262,9 @@ const items = [{
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<div class="flex flex-col items-center">
|
||||||
<code>$ npm install @nuxthq/ui</code>
|
<code>$ npm install @nuxt/ui</code>
|
||||||
<code>$ nnpm install -D @nuxthq/ui</code>
|
<code>$ nnpm install -D @nuxt/ui</code>
|
||||||
<code>$ pnpm i -D @nuxthq/ui</code>
|
<code>$ pnpm i -D @nuxt/ui</code>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</UAccordion>
|
</UAccordion>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display an alert element to draw attention.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Alert.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Alert.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display an image that represents a resource or a group of resources
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Avatar.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Avatar.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a short text to represent a status or a category.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Badge.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Badge.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Create a button with icon or link capabilities.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Button.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Button.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a list of actions in a dropdown menu.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Dropdown.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Dropdown.vue
|
||||||
- label: Menu
|
- label: Menu
|
||||||
icon: i-simple-icons-headlessui
|
icon: i-simple-icons-headlessui
|
||||||
to: https://headlessui.com/vue/menu
|
to: https://headlessui.com/vue/menu
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display an icon from Iconify library.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Icon.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Icon.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ description: Display a keyboard key in a text block.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Kbd.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Kbd.vue
|
||||||
navigation:
|
navigation:
|
||||||
title: 'Kbd'
|
title: 'Kbd'
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ description: Render a NuxtLink but with superpowers.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Link.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Link.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display an input field.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Input.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Input.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Collect and validate form data.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Form.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Form.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
@@ -25,7 +25,7 @@ The Form component requires the `validate` and `state` props for form validation
|
|||||||
```vue
|
```vue
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import type { FormError, FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
|
import type { FormError, FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
|
||||||
|
|
||||||
const state = ref({
|
const state = ref({
|
||||||
email: undefined,
|
email: undefined,
|
||||||
@@ -82,7 +82,7 @@ You can provide a schema from [Yup](#yup), [Zod](#zod) or [Joi](#joi) through th
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { object, string, InferType } from 'yup'
|
import { object, string, InferType } from 'yup'
|
||||||
import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
|
import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
|
||||||
|
|
||||||
const schema = object({
|
const schema = object({
|
||||||
email: string().email('Invalid email').required('Required'),
|
email: string().email('Invalid email').required('Required'),
|
||||||
@@ -137,7 +137,7 @@ async function submit (event: FormSubmitEvent<Schema>) {
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
|
import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
email: z.string().email('Invalid email'),
|
email: z.string().email('Invalid email'),
|
||||||
@@ -190,7 +190,7 @@ async function submit (event: FormSubmitEvent<Schema>) {
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import Joi from 'joi'
|
import Joi from 'joi'
|
||||||
import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
|
import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
|
||||||
|
|
||||||
const schema = Joi.object({
|
const schema = Joi.object({
|
||||||
email: Joi.string().required(),
|
email: Joi.string().required(),
|
||||||
@@ -279,7 +279,7 @@ You can manually set errors after form submission if required. To do this, simpl
|
|||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { FormError, FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
|
import type { FormError, FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
|
||||||
|
|
||||||
const state = ref({
|
const state = ref({
|
||||||
email: undefined,
|
email: undefined,
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a textarea field.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Textarea.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Textarea.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a select field.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Select.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Select.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
@@ -30,7 +30,7 @@ const country = ref(countries[0])
|
|||||||
```
|
```
|
||||||
::
|
::
|
||||||
|
|
||||||
When using objects, you can configure which field will be used for display through the `option-attribute` prop that defaults to `label` and which field will be used for comparison through the `value-attribute` prop that defaults to `value`.
|
When using objects, you can configure which field will be used for display through the `option-attribute` prop that defaults to `label` and which field will be used for comparison through the `value-attribute` prop that defaults to `value`.
|
||||||
|
|
||||||
Adding a `disabled` key to the objects will control the disabled state of the option.
|
Adding a `disabled` key to the objects will control the disabled state of the option.
|
||||||
|
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ description: Display a select menu with advanced features.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/SelectMenu.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/SelectMenu.vue
|
||||||
- label: 'Listbox'
|
- label: 'Listbox'
|
||||||
icon: i-simple-icons-headlessui
|
icon: i-simple-icons-headlessui
|
||||||
to: 'https://headlessui.com/vue/listbox'
|
to: 'https://headlessui.com/vue/listbox'
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a checkbox field.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Checkbox.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Checkbox.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a radio field.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Radio.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Radio.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a toggle field.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Toggle.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Toggle.vue
|
||||||
- label: 'Switch'
|
- label: 'Switch'
|
||||||
icon: i-simple-icons-headlessui
|
icon: i-simple-icons-headlessui
|
||||||
to: 'https://headlessui.com/vue/switch'
|
to: 'https://headlessui.com/vue/switch'
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a range field
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Range.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Range.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ description: Display a label and additional informations around a form element.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/FormGroup.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/FormGroup.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: 'Display data in a table.'
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/data/Table.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/data/Table.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ description: Display a vertical navigation.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/VerticalNavigation.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/VerticalNavigation.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ description: Add a customizable command palette to your app.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/CommandPalette.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/CommandPalette.vue
|
||||||
- label: 'Combobox'
|
- label: 'Combobox'
|
||||||
icon: i-simple-icons-headlessui
|
icon: i-simple-icons-headlessui
|
||||||
to: 'https://headlessui.com/vue/combobox'
|
to: 'https://headlessui.com/vue/combobox'
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Add a pagination to handle pages.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/Pagination.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Pagination.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: A set of tab panels that are displayed one at a time.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/Tabs.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Tabs.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a modal within your application.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Modal.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Modal.vue
|
||||||
- label: 'Dialog'
|
- label: 'Dialog'
|
||||||
icon: i-simple-icons-headlessui
|
icon: i-simple-icons-headlessui
|
||||||
to: 'https://headlessui.com/vue/dialog'
|
to: 'https://headlessui.com/vue/dialog'
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a dialog that slides in from the edge of the screen.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Slideover.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Slideover.vue
|
||||||
- label: 'Dialog'
|
- label: 'Dialog'
|
||||||
icon: i-simple-icons-headlessui
|
icon: i-simple-icons-headlessui
|
||||||
to: 'https://headlessui.com/vue/dialog'
|
to: 'https://headlessui.com/vue/dialog'
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a non-modal dialog that floats around a trigger element.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Popover.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Popover.vue
|
||||||
- label: 'Popover'
|
- label: 'Popover'
|
||||||
icon: i-simple-icons-headlessui
|
icon: i-simple-icons-headlessui
|
||||||
to: 'https://headlessui.com/vue/popover'
|
to: 'https://headlessui.com/vue/popover'
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display content that appears on hover next to an element.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Tooltip.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Tooltip.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ description: Display a menu that appears on right click.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/ContextMenu.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/ContextMenu.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a toast notification in your app.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Notification.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Notification.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a card for content with a header, body and footer.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/layout/Card.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Card.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: A container lets you center and constrain the width of your content
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/layout/Container.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Container.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ description: Display a placeholder while content is loading.
|
|||||||
links:
|
links:
|
||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/layout/Skeleton.vue
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Skeleton.vue
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -30,12 +30,12 @@ const anchors = [{
|
|||||||
}, {
|
}, {
|
||||||
label: 'Playground',
|
label: 'Playground',
|
||||||
icon: 'i-simple-icons-stackblitz',
|
icon: 'i-simple-icons-stackblitz',
|
||||||
to: 'https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue',
|
to: 'https://stackblitz.com/edit/nuxt-ui?file=app.config.ts,app.vue',
|
||||||
target: '_blank'
|
target: '_blank'
|
||||||
}, {
|
}, {
|
||||||
label: 'Releases',
|
label: 'Releases',
|
||||||
icon: 'i-heroicons-rocket-launch-solid',
|
icon: 'i-heroicons-rocket-launch-solid',
|
||||||
to: 'https://github.com/nuxtlabs/ui/releases',
|
to: 'https://github.com/nuxt/ui/releases',
|
||||||
target: '_blank'
|
target: '_blank'
|
||||||
}]
|
}]
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ export default defineNuxtConfig({
|
|||||||
main: {
|
main: {
|
||||||
prefix: '/main',
|
prefix: '/main',
|
||||||
driver: 'github',
|
driver: 'github',
|
||||||
repo: 'nuxtlabs/ui',
|
repo: 'nuxt/ui',
|
||||||
branch: 'main',
|
branch: 'main',
|
||||||
dir: 'docs/content'
|
dir: 'docs/content'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"name": "@nuxthq/ui-docs",
|
"name": "@nuxt/ui-docs",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxthq/ui": "workspace:latest"
|
"@nuxt/ui": "workspace:latest"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify-json/heroicons": "latest",
|
"@iconify-json/heroicons": "latest",
|
||||||
|
|||||||
@@ -65,12 +65,12 @@ const headline = computed(() => findPageHeadline(page.value))
|
|||||||
const links = computed(() => [{
|
const links = computed(() => [{
|
||||||
icon: 'i-heroicons-pencil-square',
|
icon: 'i-heroicons-pencil-square',
|
||||||
label: 'Edit this page',
|
label: 'Edit this page',
|
||||||
to: `https://github.com/nuxtlabs/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/nuxtlabs/ui',
|
to: 'https://github.com/nuxt/ui',
|
||||||
target: '_blank'
|
target: '_blank'
|
||||||
}, {
|
}, {
|
||||||
icon: 'i-heroicons-book-open',
|
icon: 'i-heroicons-book-open',
|
||||||
|
|||||||
@@ -141,14 +141,14 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-8 lg:gap-16">
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-8 lg:gap-16">
|
||||||
<NuxtLink class="text-center group" to="https://npmjs.org/package/@nuxthq/ui" target="_blank">
|
<NuxtLink class="text-center group" to="https://npmjs.org/package/@nuxt/ui" target="_blank">
|
||||||
<p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
|
<p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
|
||||||
{{ format(module.stats.downloads) }}+
|
{{ format(module.stats.downloads) }}+
|
||||||
</p>
|
</p>
|
||||||
<p>monthly downloads</p>
|
<p>monthly downloads</p>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
||||||
<NuxtLink class="text-center group" to="https://github.com/nuxtlabs/ui" target="_blank">
|
<NuxtLink class="text-center group" to="https://github.com/nuxt/ui" target="_blank">
|
||||||
<p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
|
<p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
|
||||||
{{ format(module.stats.stars) }}+
|
{{ format(module.stats.stars) }}+
|
||||||
</p>
|
</p>
|
||||||
@@ -177,7 +177,7 @@ const { data: module } = await useFetch<{
|
|||||||
transform: (module) => pick(module, ['stats', 'contributors'])
|
transform: (module) => pick(module, ['stats', 'contributors'])
|
||||||
})
|
})
|
||||||
|
|
||||||
const source = ref('npm i @nuxthq/ui')
|
const source = ref('npm i @nuxt/ui')
|
||||||
|
|
||||||
const { copy, copied } = useClipboard({ source })
|
const { copy, copied } = useClipboard({ source })
|
||||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
const breakpoints = useBreakpoints(breakpointsTailwind)
|
||||||
@@ -192,8 +192,8 @@ useSeoMeta({
|
|||||||
ogTitle: page.value.title,
|
ogTitle: page.value.title,
|
||||||
description: page.value.description,
|
description: page.value.description,
|
||||||
ogDescription: page.value.description,
|
ogDescription: page.value.description,
|
||||||
ogImage: 'https://ui.nuxtlabs.com/social-card.png',
|
ogImage: 'https://ui.nuxt.com/social-card.png',
|
||||||
twitterImage: 'https://ui.nuxtlabs.com/social-card.png'
|
twitterImage: 'https://ui.nuxt.com/social-card.png'
|
||||||
})
|
})
|
||||||
|
|
||||||
const { format } = Intl.NumberFormat('en-GB', { notation: 'compact' })
|
const { format } = Intl.NumberFormat('en-GB', { notation: 'compact' })
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "@nuxthq/ui",
|
"name": "@nuxt/ui",
|
||||||
"version": "2.7.0",
|
"version": "2.7.0",
|
||||||
"repository": "https://github.com/nuxtlabs/ui",
|
"repository": "https://github.com/nuxt/ui",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"exports": {
|
"exports": {
|
||||||
".": {
|
".": {
|
||||||
|
|||||||
7
pnpm-lock.yaml
generated
7
pnpm-lock.yaml
generated
@@ -110,7 +110,7 @@ importers:
|
|||||||
|
|
||||||
docs:
|
docs:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@nuxthq/ui':
|
'@nuxt/ui':
|
||||||
specifier: workspace:latest
|
specifier: workspace:latest
|
||||||
version: link:..
|
version: link:..
|
||||||
devDependencies:
|
devDependencies:
|
||||||
@@ -131,7 +131,7 @@ importers:
|
|||||||
version: 0.2.0(eslint@8.48.0)
|
version: 0.2.0(eslint@8.48.0)
|
||||||
'@nuxthq/elements':
|
'@nuxthq/elements':
|
||||||
specifier: npm:@nuxthq/elements-edge@0.0.1-28233683.5219c54
|
specifier: npm:@nuxthq/elements-edge@0.0.1-28233683.5219c54
|
||||||
version: /@nuxthq/elements-edge@0.0.1-28233683.5219c54(@nuxt/content@2.8.2)(@nuxthq/ui@)(vue@3.3.4)
|
version: /@nuxthq/elements-edge@0.0.1-28233683.5219c54(@nuxt/content@2.8.2)(vue@3.3.4)
|
||||||
'@nuxthq/studio':
|
'@nuxthq/studio':
|
||||||
specifier: ^0.13.4
|
specifier: ^0.13.4
|
||||||
version: 0.13.4(rollup@3.28.1)
|
version: 0.13.4(rollup@3.28.1)
|
||||||
@@ -1664,14 +1664,13 @@ packages:
|
|||||||
- vue-tsc
|
- vue-tsc
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@nuxthq/elements-edge@0.0.1-28233683.5219c54(@nuxt/content@2.8.2)(@nuxthq/ui@)(vue@3.3.4):
|
/@nuxthq/elements-edge@0.0.1-28233683.5219c54(@nuxt/content@2.8.2)(vue@3.3.4):
|
||||||
resolution: {integrity: sha512-9xoFzuXWGoH6WJPUNHWRgb3RHJ9Btpvrliai5E68tcD5JNBF8rolwBOZJ2GE+1tDLS4MhcD3ps9UAIDiin/qBQ==}
|
resolution: {integrity: sha512-9xoFzuXWGoH6WJPUNHWRgb3RHJ9Btpvrliai5E68tcD5JNBF8rolwBOZJ2GE+1tDLS4MhcD3ps9UAIDiin/qBQ==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
'@nuxt/content': latest
|
'@nuxt/content': latest
|
||||||
'@nuxthq/ui': npm:@nuxthq/ui-edge@latest
|
'@nuxthq/ui': npm:@nuxthq/ui-edge@latest
|
||||||
dependencies:
|
dependencies:
|
||||||
'@nuxt/content': 2.8.2(rollup@3.28.1)(vue@3.3.4)
|
'@nuxt/content': 2.8.2(rollup@3.28.1)(vue@3.3.4)
|
||||||
'@nuxthq/ui': 'link:'
|
|
||||||
'@vueuse/core': 10.4.1(vue@3.3.4)
|
'@vueuse/core': 10.4.1(vue@3.3.4)
|
||||||
lodash-es: 4.17.21
|
lodash-es: 4.17.21
|
||||||
ofetch: 1.3.3
|
ofetch: 1.3.3
|
||||||
|
|||||||
@@ -18,5 +18,5 @@ if [[ ! -z ${NODE_AUTH_TOKEN} ]] ; then
|
|||||||
fi
|
fi
|
||||||
|
|
||||||
# Release package
|
# Release package
|
||||||
echo "Publishing @nuxthq/ui"
|
echo "Publishing @nuxt/ui"
|
||||||
npm publish -q --access public
|
npm publish -q --access public
|
||||||
|
|||||||
@@ -15,5 +15,5 @@ if [[ ! -z ${NODE_AUTH_TOKEN} ]] ; then
|
|||||||
fi
|
fi
|
||||||
|
|
||||||
# Release package
|
# Release package
|
||||||
echo "Publishing @nuxthq/ui"
|
echo "Publishing @nuxt/ui"
|
||||||
npm publish -q --access public
|
npm publish -q --access public
|
||||||
|
|||||||
@@ -12,10 +12,10 @@ export default defineNuxtPlugin(() => {
|
|||||||
const gray: Record<string, string> | undefined = colors[appConfig.ui.gray]
|
const gray: Record<string, string> | undefined = colors[appConfig.ui.gray]
|
||||||
|
|
||||||
if (!primary) {
|
if (!primary) {
|
||||||
console.warn(`[@nuxthq/ui] Primary color '${appConfig.ui.primary}' not found in Tailwind config`)
|
console.warn(`[@nuxt/ui] Primary color '${appConfig.ui.primary}' not found in Tailwind config`)
|
||||||
}
|
}
|
||||||
if (!gray) {
|
if (!gray) {
|
||||||
console.warn(`[@nuxthq/ui] Gray color '${appConfig.ui.gray}' not found in Tailwind config`)
|
console.warn(`[@nuxt/ui] Gray color '${appConfig.ui.gray}' not found in Tailwind config`)
|
||||||
}
|
}
|
||||||
|
|
||||||
return `:root {
|
return `:root {
|
||||||
|
|||||||
Reference in New Issue
Block a user