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

docs(getting-started): use ::steps and mention css files

Browse Source
This commit is contained in:
Benjamin Canac
2024-11-09 22:03:49 +01:00
parent 761afaf40d
commit 95be76940c
7 changed files with 132 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,9 @@ select:
## Setup
1. Install the Nuxt UI v3 alpha package:
::steps{level="4"}
#### Install the Nuxt UI v3 alpha package
::code-group{sync="pm"}
@@ -37,10 +39,10 @@ bun add @nuxt/ui@next
::
::warning
If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next` directly in your project's root directory.
If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next` in your project's root directory.
::
2. Register the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"}:
#### Add the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"}
```ts [nuxt.config.ts]
export default defineNuxtConfig({
@@ -48,15 +50,24 @@ export default defineNuxtConfig({
})
```
3. Import Tailwind CSS and Nuxt UI in your `app.vue`{lang="ts-type"} or [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property):
#### Import Tailwind CSS and Nuxt UI in your CSS
```vue [app.vue]
<style>
```css [assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
</style>
```
::note
Use the `css` property in your `nuxt.config.ts` to import your CSS file.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css']
})
```
::
::tip
It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for VSCode and add the following settings:
```json
@@ -70,8 +81,6 @@ It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.
::
::warning
IntelliSense works better when importing `tailwindcss` in a proper `.css` file which will be automatically detected.
::
## Options

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

@@ -14,7 +14,9 @@ select:
## Setup
1. Install the Nuxt UI v3 alpha package:
::steps{level="4"}
#### Install the Nuxt UI v3 alpha package
::code-group{sync="pm"}
@@ -37,12 +39,12 @@ bun add @nuxt/ui@next
::
::warning
If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next`, `vue-router` and `@unhead/vue` directly in your project's root directory.
If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next`, `vue-router` and `@unhead/vue` in your project's root directory.
::
2. Add the Nuxt UI Vite plugin in your `vite.config.ts`{lang="ts-type"}:
#### Add the Nuxt UI Vite plugin in your `vite.config.ts`{lang="ts-type"}
```ts [vite.config.ts]
```ts [vite.config.ts]{3,8}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
@@ -51,7 +53,7 @@ export default defineConfig({
plugins: [
vue(),
ui()
],
]
})
```
@@ -71,28 +73,45 @@ components.d.ts
```
::
3. Register the Nuxt UI Vue plugin in your app:
#### Use the Nuxt UI Vue plugin in your `main.ts`
```ts [main.ts]
```ts [main.ts]{2,7}
import { createApp } from 'vue'
import nuxtUI from '@nuxt/ui/vue-plugin'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
const app = createApp(App)
// ...
app.use(nuxtUI)
app.use(ui)
app.mount('#app')
```
4. Import Tailwind CSS and Nuxt UI in your `App.vue`{lang="ts-type"} or CSS:
#### Import Tailwind CSS and Nuxt UI in your CSS
```vue [App.vue]
<style>
```css [assets/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
</style>
```
::note
Import the CSS file in your `main.ts`.
```ts [main.ts]{1}
import './assets/main.css'
import { createApp } from 'vue'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
const app = createApp(App)
app.use(ui)
app.mount('#app')
```
::
::tip
It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for VSCode and add the following settings:
```json
@@ -106,8 +125,6 @@ It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.
::
::warning
IntelliSense works better when importing `tailwindcss` in a proper `.css` file which will be automatically detected.
::
## Options

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

@@ -11,8 +11,7 @@ Nuxt UI v3 uses Tailwind CSS v4 alpha which doesn't have a documentation yet, le
Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your theme with CSS variables inside a `@theme` directive:
```vue [app.vue]
<style>
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -33,7 +32,6 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
--color-green-900: #0A5331;
--color-green-950: #052E16;
}
</style>
```
The `@theme` directive tells Tailwind to make new utilities and variants available based on these variables. It's the equivalent of the `theme.extend` key in Tailwind CSS v3 `tailwind.config.ts` file.
@@ -48,13 +46,11 @@ You can use the `@source` directive to add explicit content glob patterns if you
This can be useful when writing Tailwind classes in markdown files with [`@nuxt/content`](https://github.com/nuxt/content):
```vue [app.vue]
<style>
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@source "../content/**/*.md";
</style>
```
::note{to="https://github.com/tailwindlabs/tailwindcss/pull/14078"}
@@ -65,13 +61,11 @@ You can learn more about the `@source` directive in this pull request.
You can use the `@plugin` directive to import Tailwind CSS plugins.
```vue [app.vue]
<style>
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@plugin "@tailwindcss/typography";
</style>
```
::note{to="https://github.com/tailwindlabs/tailwindcss/pull/14264"}
@@ -154,8 +148,7 @@ These color aliases are not automatically defined as Tailwind CSS colors, so cla
However, you can generate these classes using Tailwind's `@theme` directive, allowing you to use custom color utility classes while maintaining dynamic color aliases:
```vue [app.vue]
<style>
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -172,7 +165,6 @@ However, you can generate these classes using Tailwind's `@theme` directive, all
--color-primary-900: var(--ui-color-primary-900);
--color-primary-950: var(--ui-color-primary-950);
}
</style>
```
::
@@ -217,8 +209,7 @@ You can use these variables in classes like `text-[var(--ui-primary)]`, it will
::tip
You can change which shade is used for each color on light and dark mode:
```vue [app.vue]
<style>
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -229,7 +220,6 @@ You can change which shade is used for each color on light and dark mode:
.dark {
--ui-primary: var(--ui-color-primary-200);
}
</style>
```
::
@@ -324,8 +314,7 @@ body {
::tip
You can customize these CSS variables to tailor the appearance of your application:
```vue [app.vue]
<style>
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -338,7 +327,6 @@ You can customize these CSS variables to tailor the appearance of your applicati
--ui-bg: var(--ui-color-neutral-950);
--ui-border: var(--ui-color-neutral-900);
}
</style>
```
::
@@ -359,15 +347,13 @@ Try the :prose-icon{name="i-lucide-swatch-book" class="text-[var(--ui-primary)]"
::tip
You can customize the default radius value using the default Tailwind CSS variables or a value of your choice:
```vue [app.vue]
<style>
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-radius: var(--radius-sm);
}
</style>
```
::

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

@@ -12,15 +12,13 @@ links:
Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/fonts) module for you, so there's no additional setup required. To use a font in your Nuxt UI application, you can simply declare it in your CSS:
```vue [app.vue]
<style>
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--font-family-sans: 'Public Sans', sans-serif;
}
</style>
```
That's it! Nuxt Fonts will detect this and you should immediately see the web font loaded in your browser.

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

@@ -12,11 +12,11 @@ select:
to: /getting-started/i18n/vue
---
## Usage
::note{to="/components/app"}
Nuxt UI provides an [App](/components/app) component that wraps your app to provide global configurations.
::
### Locale
## Locale
Use the `locale` prop with the locale you want to use from `@nuxt/ui/locale`:
@@ -32,7 +32,7 @@ import { fr } from '@nuxt/ui/locale'
</template>
```
#### Custom locale
### Custom locale
You also have the option to add your own locale using `defineLocale`:
@@ -50,11 +50,13 @@ const locale = defineLocale('My custom locale', {
</template>
```
#### Dynamic locale
### Dynamic locale
To dynamically switch between languages, you can use the [NuxtI18n](https://i18n.nuxtjs.org/docs/getting-started) module.
To dynamically switch between languages, you can use the [Nuxt I18n](https://i18n.nuxtjs.org/) module.
1. Install the `@nuxtjs/i18n` package:
::steps{level="4"}
#### Install the Nuxt I18n package
::code-group{sync="pm"}
@@ -76,7 +78,7 @@ bun add @nuxtjs/i18n@next
::
2. Add the `@nuxtjs/i18n` module to your `nuxt.config.ts`{lang="ts-type"} and define the locales you want to support:
#### Add the Nuxt I18n module in your `nuxt.config.ts`{lang="ts-type"}
```ts [nuxt.config.ts]
export default defineNuxtConfig({
@@ -99,7 +101,7 @@ export default defineNuxtConfig({
})
```
3. Use the `locale` prop with the `useI18n` locale you want to use from `@nuxt/ui/locale`:
#### Set the `locale` prop using `useI18n`
```vue [app.vue]
<script setup lang="ts">
@@ -115,7 +117,13 @@ const { locale } = useI18n()
</template>
```
### Direction
::
### Supported languages
:supported-languages
## Direction
Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app:
@@ -127,11 +135,13 @@ Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of yo
</template>
```
#### Dynamic direction
### Dynamic direction
To dynamically change the global reading direction of your app, you can use the [useTextDirection](https://vueuse.org/core/useTextDirection/) composable.
To dynamically change the global reading direction of your app, you can use VueUse's [useTextDirection](https://vueuse.org/core/useTextDirection/) composable to detect and switch between LTR and RTL text directions.
1. Install the `@vueuse/core` package:
::steps{level="4"}
#### Install the `@vueuse/core` package
::code-group{sync="pm"}
@@ -153,7 +163,7 @@ bun add @vueuse/core
::
2. Then in your `app.vue`:
#### Set the `dir` prop using `useTextDirection`
```vue [app.vue]
<script setup lang="ts">
@@ -170,6 +180,4 @@ const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
</template>
```
## Supported languages
:supported-languages
::

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

@@ -12,11 +12,11 @@ select:
to: /getting-started/i18n/vue
---
## Usage
::note{to="/components/app"}
Nuxt UI provides an [App](/components/app) component that wraps your app to provide global configurations.
::
### Locale
## Locale
Use the `locale` prop with the locale you want to use from `@nuxt/ui/locale`:
@@ -32,7 +32,7 @@ import { fr } from '@nuxt/ui/locale'
</template>
```
#### Custom locale
### Custom locale
You also have the option to add your locale using `defineLocale`:
@@ -52,11 +52,13 @@ const locale = defineLocale('My custom locale', {
</template>
```
#### Dynamic locale
### Dynamic locale
To dynamically switch between languages, you can use the [VueI18n](https://vue-i18n.intlify.dev/) plugin.
To dynamically switch between languages, you can use the [Vue I18n](https://vue-i18n.intlify.dev/) plugin.
1. Install the `vue-i18n` package:
::steps{level="4"}
#### Install the Vue I18n package
::code-group{sync="pm"}
@@ -78,35 +80,37 @@ bun add vue-i18n@10
::
2. Define the `createI18n` instance and register the `i18n` plugin in your `main.ts` file:
#### Use the Vue I18n plugin in your `main.ts`
```ts{3-19,22} [main.ts]
```ts [main.ts]{2,6-18,22}
import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'
const messages = {
en: {
// ...
},
de: {
// ...
},
}
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
const i18n = createI18n({
legacy: false,
locale: 'en',
availableLocales: ['en', 'de'],
messages,
messages: {
en: {
// ...
},
de: {
// ...
}
}
})
createApp(App)
.use(i18n)
.mount('#app')
const app = createApp(App)
app.use(i18n)
app.use(ui)
app.mount('#app')
```
3. Use the `locale` prop with the `useI18n` locale you want to use from `@nuxt/ui/locale`:
#### Set the `locale` prop using `useI18n`
```vue [App.vue]
<script setup lang="ts">
@@ -123,7 +127,13 @@ const { locale } = useI18n()
</template>
```
### Direction
::
## Supported languages
:supported-languages
## Direction
Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app:
@@ -135,11 +145,13 @@ Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of yo
</template>
```
#### Dynamic direction
### Dynamic direction
To dynamically change the global reading direction of your app, you can use the [useTextDirection](https://vueuse.org/core/useTextDirection/) composable.
To dynamically change the global reading direction of your app, you can use VueUse's [useTextDirection](https://vueuse.org/core/useTextDirection/) composable to detect and switch between LTR and RTL text directions.
1. Install the `@vueuse/core` package:
::steps{level="4"}
#### Install the `@vueuse/core` package
::code-group{sync="pm"}
@@ -161,7 +173,7 @@ bun add @vueuse/core
::
2. Then in your `App.vue`:
#### Set the `dir` prop using `useTextDirection`
```vue [App.vue]
<script setup lang="ts">
@@ -178,7 +190,3 @@ const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
</UApp>
</template>
```
## Supported languages
:supported-languages