arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-25 09:20:36 +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

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