nuxt-i18n-micro 1.5.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -480
- package/dist/client/200.html +6 -6
- package/dist/client/404.html +6 -6
- package/dist/client/_nuxt/{CdzliWdy.js → B5V5CGNX.js} +1 -1
- package/dist/client/_nuxt/{BfxQCKlw.js → C5CUDaeR.js} +1 -1
- package/dist/client/_nuxt/{Cnou2wpD.js → DUtCg1fH.js} +58 -66
- package/dist/client/_nuxt/{DrEIrqkc.js → a39Im4hm.js} +1 -1
- package/dist/client/_nuxt/builds/latest.json +1 -1
- package/dist/client/_nuxt/builds/meta/4583b4b6-b29c-448a-91a8-18c469a313df.json +1 -0
- package/dist/client/index.html +6 -6
- package/dist/module.json +1 -1
- package/dist/runtime/components/i18n-link.vue +37 -0
- package/dist/runtime/components/i18n-switcher.vue +92 -0
- package/dist/runtime/plugins/01.plugin.d.ts +3 -14
- package/dist/runtime/plugins/01.plugin.js +5 -1
- package/dist/runtime/translationHelper.d.ts +2 -1
- package/dist/runtime/translationHelper.js +10 -1
- package/package.json +12 -3
- package/dist/client/_nuxt/builds/meta/d62c5b85-c72c-4371-bfa7-3402c13237f3.json +0 -1
package/README.md
CHANGED
|
@@ -100,492 +100,20 @@ export default defineNuxtConfig({
|
|
|
100
100
|
|
|
101
101
|
That's it! You're now ready to use Nuxt I18n Micro in your Nuxt app.
|
|
102
102
|
|
|
103
|
-
## Folder Structure
|
|
104
103
|
|
|
105
|
-
|
|
104
|
+
[Docs](https://s00d.github.io/nuxt-i18n-micro/)
|
|
106
105
|
|
|
107
|
-
|
|
108
|
-
/locales
|
|
109
|
-
/pages
|
|
110
|
-
/index
|
|
111
|
-
en.json
|
|
112
|
-
fr.json
|
|
113
|
-
ar.json
|
|
114
|
-
/about
|
|
115
|
-
en.json
|
|
116
|
-
fr.json
|
|
117
|
-
ar.json
|
|
118
|
-
en.json
|
|
119
|
-
fr.json
|
|
120
|
-
ar.json
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
- **Global File**: Located at `locales/{locale}.json` (e.g., `locales/en.json`). Used for common texts shared across multiple pages, such as menus.
|
|
124
|
-
- **Page-Specific Files**: Located at `locales/pages/{routeName}/{locale}.json` (e.g., `locales/pages/index/en.json`). These are used for translations specific to individual pages.
|
|
125
|
-
|
|
126
|
-
## Plugin Methods
|
|
127
|
-
|
|
128
|
-
### `$getLocale()`
|
|
129
|
-
Returns the current locale code.
|
|
130
|
-
|
|
131
|
-
```typescript
|
|
132
|
-
const locale = $getLocale()
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
### `$getLocales()`
|
|
136
|
-
Returns an array of all available locales configured in the module.
|
|
137
|
-
|
|
138
|
-
```typescript
|
|
139
|
-
const locales = $getLocales()
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
### `$t(key: string, params?: Record<string, any>, defaultValue?: string)`
|
|
143
|
-
Fetches a translation for the given key. Optionally interpolates parameters into the translation.
|
|
144
|
-
|
|
145
|
-
```typescript
|
|
146
|
-
const welcomeMessage = $t('welcome', { username: 'Alice', unreadCount: 5 })
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
### `$tc(key: string, count: number, defaultValue?: string)`
|
|
150
|
-
Fetches a pluralized translation for the given key based on the count.
|
|
151
|
-
|
|
152
|
-
```typescript
|
|
153
|
-
const appleCountMessage = $tc('apples', 10)
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
### `$switchLocale(locale: string)`
|
|
157
|
-
Switches to the given locale and redirects the user to the appropriate localized route.
|
|
158
|
-
|
|
159
|
-
```typescript
|
|
160
|
-
$switchLocale('fr')
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
### `$localeRoute(to: RouteLocationRaw, locale?: string): RouteLocationRaw`
|
|
164
|
-
Generates a localized route object based on the target route.
|
|
165
|
-
|
|
166
|
-
```typescript
|
|
167
|
-
const localizedRoute = $localeRoute({ name: 'index' })
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
### `$mergeTranslations(newTranslations: Translations)`
|
|
171
|
-
Merges new translations into the existing translation cache for the current route and locale.
|
|
172
|
-
|
|
173
|
-
```typescript
|
|
174
|
-
$mergeTranslations({
|
|
175
|
-
welcome: 'Bienvenue, {username}!'
|
|
176
|
-
})
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
## `$defineI18nRoute(routeDefinition: { locales?: string[] | Record<string, Record<string, TranslationObject>> })`
|
|
180
|
-
Defines route behavior based on the current locale. This method can be used to control access to specific routes based on available locales or to provide translations for specific locales.
|
|
181
|
-
|
|
182
|
-
- `locales`: This property determines which locales are available for the route. It can be either:
|
|
183
|
-
- An array of strings, where each string represents an available locale (e.g., `['en', 'fr', 'de']`).
|
|
184
|
-
- An object where each key is a locale code, and the value is either an object containing translations or an empty object if you do not wish to provide translations for that locale.
|
|
185
|
-
|
|
186
|
-
### Example 1: Controlling Access Based on Locales
|
|
187
|
-
|
|
188
|
-
```typescript
|
|
189
|
-
import { useNuxtApp } from '#imports'
|
|
190
|
-
|
|
191
|
-
const { $defineI18nRoute } = useNuxtApp()
|
|
192
|
-
|
|
193
|
-
$defineI18nRoute({
|
|
194
|
-
locales: ['en', 'fr', 'de'] // Only these locales are allowed for this route
|
|
195
|
-
})
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
### Example 2: Providing Translations for Locales
|
|
199
|
-
|
|
200
|
-
```typescript
|
|
201
|
-
import { useNuxtApp } from '#imports'
|
|
202
|
-
|
|
203
|
-
const { $defineI18nRoute } = useNuxtApp()
|
|
204
|
-
|
|
205
|
-
$defineI18nRoute({
|
|
206
|
-
locales: {
|
|
207
|
-
en: { greeting: 'Hello', farewell: 'Goodbye' },
|
|
208
|
-
fr: { greeting: 'Bonjour', farewell: 'Au revoir' },
|
|
209
|
-
de: { greeting: 'Hallo', farewell: { aaa: { bbb: "Auf Wiedersehen" } } },
|
|
210
|
-
ru: {} // Russian locale is allowed but no translations are provided
|
|
211
|
-
}
|
|
212
|
-
})
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
### Explanation:
|
|
216
|
-
- **Locales Array**: If you only want to specify which locales are allowed for a route, pass an array of locale codes. The user will only be able to access this route if the current locale is in this list.
|
|
217
|
-
- **Locales Object**: If you want to provide specific translations for each locale, pass an object where each key is a locale code. The value should be an object with key-value pairs for translations. If you do not wish to provide translations for a locale but still want to allow access, pass an empty object (`{}`) for that locale.
|
|
218
|
-
|
|
219
|
-
## useNuxtApp
|
|
220
|
-
|
|
221
|
-
```ts
|
|
222
|
-
import { useNuxtApp } from '#imports'
|
|
223
|
-
|
|
224
|
-
const { $getLocale, $switchLocale, $getLocales, $localeRoute, $t } = useNuxtApp()
|
|
225
|
-
```
|
|
226
|
-
|
|
227
|
-
## Composable
|
|
228
|
-
|
|
229
|
-
```ts
|
|
230
|
-
import { useI18n } from '#imports'
|
|
231
|
-
|
|
232
|
-
const { $getLocale, $switchLocale, $getLocales, $localeRoute, $t } = useI18n()
|
|
233
|
-
// or
|
|
234
|
-
const i18n = useI18n()
|
|
235
|
-
|
|
236
|
-
```
|
|
237
|
-
|
|
238
|
-
## Example
|
|
239
|
-
|
|
240
|
-
```vue
|
|
241
|
-
<template>
|
|
242
|
-
<div>
|
|
243
|
-
<p>{{ $t('key2.key2.key2.key2.key2') }}</p>
|
|
244
|
-
<p>Current Locale: {{ $getLocale() }}</p>
|
|
245
|
-
|
|
246
|
-
<div>
|
|
247
|
-
{{ $t('welcome', { username: 'Alice', unreadCount: 5 }) }}
|
|
248
|
-
</div>
|
|
249
|
-
<div>
|
|
250
|
-
{{ $tc('apples', 10) }}
|
|
251
|
-
</div>
|
|
252
|
-
|
|
253
|
-
<div>
|
|
254
|
-
<button
|
|
255
|
-
v-for="locale in $getLocales()"
|
|
256
|
-
:key="locale"
|
|
257
|
-
:disabled="locale === $getLocale()"
|
|
258
|
-
@click="$switchLocale(locale.code)"
|
|
259
|
-
>
|
|
260
|
-
Switch to {{ locale.code }}
|
|
261
|
-
</button>
|
|
262
|
-
</div>
|
|
263
|
-
|
|
264
|
-
<div>
|
|
265
|
-
<NuxtLink :to="$localeRoute({ name: 'index' })">
|
|
266
|
-
Go to Index
|
|
267
|
-
</NuxtLink>
|
|
268
|
-
</div>
|
|
269
|
-
</div>
|
|
270
|
-
</template>
|
|
271
|
-
|
|
272
|
-
<script setup>
|
|
273
|
-
import { useI18n } from '#imports'
|
|
274
|
-
|
|
275
|
-
const { $getLocale, $switchLocale, $getLocales, $localeRoute, $t, $tc } = useI18n()
|
|
276
|
-
</script>
|
|
277
|
-
|
|
278
|
-
```
|
|
279
|
-
Вот обновленный раздел `README.md` с описанием работы параметра `routesLocaleLinks` и улучшенным оформлением параметров модуля.
|
|
280
|
-
|
|
281
|
-
## Module Options
|
|
282
|
-
|
|
283
|
-
The module accepts the following options in the Nuxt configuration:
|
|
284
|
-
|
|
285
|
-
### **locales**: `Locale[]`
|
|
286
|
-
|
|
287
|
-
```typescript
|
|
288
|
-
interface Locale {
|
|
289
|
-
code: string
|
|
290
|
-
disabled?: boolean
|
|
291
|
-
iso?: string
|
|
292
|
-
dir?: 'rtl' | 'ltr'
|
|
293
|
-
}
|
|
294
|
-
```
|
|
295
|
-
|
|
296
|
-
An array of locale objects. Each locale should have the following properties:
|
|
297
|
-
|
|
298
|
-
- **`code`**: *(string, required)* A unique identifier for the locale, such as `'en'` for English or `'fr'` for French.
|
|
299
|
-
- **`iso`**: *(string, optional)* The ISO code for the locale, which is typically used for setting the `lang` attribute in HTML or for other internationalization purposes (e.g., `'en-US'`, `'fr-FR'`).
|
|
300
|
-
- **`dir`**: *(string, optional)* The text direction for the locale. It can be either `'rtl'` for right-to-left languages (like Arabic or Hebrew) or `'ltr'` for left-to-right languages (like English or French).
|
|
301
|
-
- **`disabled`**: *(boolean, optional)* A flag indicating whether this locale should be disabled or excluded from certain layers or operations.
|
|
302
|
-
|
|
303
|
-
Example:
|
|
304
|
-
|
|
305
|
-
```typescript
|
|
306
|
-
locales: [
|
|
307
|
-
{ code: 'en', iso: 'en' },
|
|
308
|
-
{ code: 'fr' },
|
|
309
|
-
{ code: 'ar', iso: 'ar-SA', dir: 'rtl' }
|
|
310
|
-
]
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
### **meta**: `boolean`
|
|
314
|
-
|
|
315
|
-
Indicates whether to automatically generate SEO-related meta tags (like `alternate` links).
|
|
316
|
-
|
|
317
|
-
### **defaultLocale**: `string`
|
|
318
|
-
|
|
319
|
-
The default locale code. For example, `'en'`.
|
|
320
|
-
|
|
321
|
-
### **translationDir**: `string`
|
|
322
|
-
|
|
323
|
-
The directory where translation files are stored. Default value is `'locales'`.
|
|
324
|
-
|
|
325
|
-
### **autoDetectLanguage**: `boolean`
|
|
326
|
-
|
|
327
|
-
If `true`, the module automatically detects the user's preferred language and redirects accordingly.
|
|
328
|
-
|
|
329
|
-
### **plural**: `function`
|
|
330
|
-
|
|
331
|
-
A custom function for handling pluralization logic.
|
|
332
|
-
|
|
333
|
-
### **includeDefaultLocaleRoute**: `boolean`
|
|
334
|
-
|
|
335
|
-
If `true`, all routes without a locale prefix will redirect to the default locale route.
|
|
336
|
-
|
|
337
|
-
### **routesLocaleLinks**: `Record<string, string>`
|
|
338
|
-
|
|
339
|
-
This parameter allows you to create links between different pages' locale files. It is particularly useful in cases where you have similar pages (e.g., a main page and a page with a slug) and want them to share the same translation file.
|
|
340
|
-
|
|
341
|
-
For example, if you have a page with a slug (`dir1-slug`) and a main page (`index`), you can set up `routesLocaleLinks` so that `dir1-slug` will use the locale file of `index`, avoiding the need to maintain duplicate translation files.
|
|
342
|
-
|
|
343
|
-
**Note**: `dir1-slug` and `index` refer to the names of the routes, which you can inspect in the devtools.
|
|
344
|
-
|
|
345
|
-
Example:
|
|
346
|
-
|
|
347
|
-
```typescript
|
|
348
|
-
export default defineNuxtConfig({
|
|
349
|
-
i18n: {
|
|
350
|
-
routesLocaleLinks: {
|
|
351
|
-
'dir1-slug': 'index',
|
|
352
|
-
},
|
|
353
|
-
},
|
|
354
|
-
})
|
|
355
|
-
```
|
|
356
|
-
|
|
357
|
-
In this example, the page with the route name `dir1-slug` will load its translations from the locale file associated with the `index` route.
|
|
106
|
+
[Plugin Methods](https://s00d.github.io/nuxt-i18n-micro/api/methods)
|
|
358
107
|
|
|
359
|
-
|
|
108
|
+
[Plugin Methods](https://s00d.github.io/nuxt-i18n-micro/api/methods)
|
|
360
109
|
|
|
361
|
-
(
|
|
110
|
+
[Components](https://s00d.github.io/nuxt-i18n-micro/components/i18n-t)
|
|
362
111
|
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
The `Nuxt I18n Micro` module provides an efficient way to manage internationalization (i18n) in your Nuxt application, with a focus on performance and simplicity. One of the key features of this module is how it handles the loading of locale-specific translations. Below is an explanation of how this process works.
|
|
366
|
-
|
|
367
|
-
### How Locale Loading Works
|
|
368
|
-
|
|
369
|
-
In `Nuxt I18n Micro`, translations are loaded dynamically based on the user's selected locale. The module uses a specific route pattern (`/_locales/:page/:locale/data.json`) to fetch the translation files for each page and locale. This approach is designed to minimize the initial load time and only load the necessary translations for the current page and locale.
|
|
370
|
-
|
|
371
|
-
#### Route Structure
|
|
372
|
-
|
|
373
|
-
The translations are organized into JSON files located in the `locales` directory. These files are split into:
|
|
374
|
-
|
|
375
|
-
- **Global Files**: Located at `locales/{locale}.json` (e.g., `locales/en.json`). These files contain translations shared across the entire application, such as menu items or common UI elements.
|
|
376
|
-
- **Page-Specific Files**: Located at `locales/pages/{routeName}/{locale}.json` (e.g., `locales/pages/index/en.json`). These files contain translations specific to individual pages.
|
|
377
|
-
|
|
378
|
-
#### Dynamic Locale Routes
|
|
379
|
-
|
|
380
|
-
To accommodate the dynamic nature of translation loading, `Nuxt I18n Micro` extends the default routing configuration by adding locale-specific routes. This means that for each page, a localized version of the route is generated. For example, if your application has an `index` page and supports English (`en`) and French (`fr`), the following routes would be generated:
|
|
381
|
-
|
|
382
|
-
- `/en/index`
|
|
383
|
-
- `/fr/index`
|
|
384
|
-
|
|
385
|
-
This structure allows the module to load the appropriate translations based on the user's selected locale.
|
|
386
|
-
|
|
387
|
-
### Loading Translations via _locales Route
|
|
388
|
-
|
|
389
|
-
Given the way Vite and Nuxt handle modules, the `Nuxt I18n Micro` module uses a special route (`/_locales/:page/:locale/data.json`) to fetch translations. This is necessary because, during the build process, Vite may not bundle all translation files directly into the application. Instead, the module dynamically loads these files from the server as needed.
|
|
390
|
-
|
|
391
|
-
When a user navigates to a page, the module will:
|
|
392
|
-
|
|
393
|
-
1. Check if the necessary translation file for the current page and locale is already loaded in the cache.
|
|
394
|
-
2. If not, it will send a request to the `_locales` route to fetch the required translation file.
|
|
395
|
-
3. Once the translation file is loaded, it is cached for future use, ensuring that the translations are readily available when the user navigates to another part of the application.
|
|
396
|
-
|
|
397
|
-
### Caching and Pre-rendering
|
|
398
|
-
|
|
399
|
-
To further optimize performance, `Nuxt I18n Micro` supports caching and pre-rendering of translation files:
|
|
400
|
-
|
|
401
|
-
- **Caching**: Once a translation file is loaded, it is stored in the cache, reducing the need for subsequent requests.
|
|
402
|
-
- **Pre-rendering**: During the build process, the module can pre-render translation files for all configured locales and routes, which are then served directly from the server without the need for runtime requests.
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
Certainly! Here's an updated section for your README that includes the description of the `<i18n-t>` component, along with explanations for each prop and examples of usage.
|
|
406
|
-
|
|
407
|
-
---
|
|
408
|
-
|
|
409
|
-
## `<i18n-t>` Component
|
|
410
|
-
|
|
411
|
-
The `<i18n-t>` component in `Nuxt I18n Micro` is a flexible and powerful tool designed to handle translations within your Nuxt application. It supports various features such as interpolation, pluralization, and dynamic HTML rendering.
|
|
412
|
-
|
|
413
|
-
### Component Props
|
|
414
|
-
|
|
415
|
-
- **`keypath`** (`string`, required): The translation key used to look up the corresponding translation string from the locale files.
|
|
416
|
-
|
|
417
|
-
- **`plural`** (`number | null`, optional): The count used for pluralization. If provided, the component will use the `$tc` method for translating based on the pluralization rules defined for the locale.
|
|
418
|
-
|
|
419
|
-
- **`tag`** (`string`, optional, default: `'span'`): The HTML tag used to wrap the translated content. You can specify any valid HTML tag, such as `div`, `p`, `h1`, etc.
|
|
420
|
-
|
|
421
|
-
- **`scope`** (`string`, optional, default: `'global'`): Specifies the scope of the translation. This prop is useful if you have different translation scopes in your application, although the default is set to `'global'`.
|
|
422
|
-
|
|
423
|
-
- **`params`** (`Record<string, string | number | boolean>`, optional, default: `() => ({})`): An object containing key-value pairs to be interpolated into the translation string. This is useful for dynamic translations where certain values need to be inserted into the text.
|
|
424
|
-
|
|
425
|
-
- **`defaultValue`** (`string`, optional, default: `''`): A fallback translation that will be displayed if the `keypath` does not match any key in the translation files.
|
|
426
|
-
|
|
427
|
-
- **`html`** (`boolean`, optional, default: `false`): A flag indicating whether the translation contains HTML. When set to `true`, the translated string will be rendered as raw HTML.
|
|
428
|
-
|
|
429
|
-
- **`locale`** (`string`, optional): The locale to use for this translation. If not provided, the component will use the current locale set by the application.
|
|
430
|
-
|
|
431
|
-
- **`wrap`** (`boolean`, optional, default: `true`): Determines if the translated content should be wrapped in the specified `tag`. If set to `false`, the component will not wrap the translation in an HTML element.
|
|
432
|
-
|
|
433
|
-
- **`customPluralRule`** (`(value: string, count: number, locale: string) => string`, optional): A custom function for handling pluralization. This allows you to override the default pluralization behavior with your custom logic.
|
|
434
|
-
|
|
435
|
-
- **`hideIfEmpty`** (`boolean`, optional, default: `false`): If `true`, the component will not render anything if the translation string is empty. This is useful for conditional rendering based on the presence of a translation.
|
|
436
|
-
|
|
437
|
-
### Examples of Usage
|
|
438
|
-
|
|
439
|
-
#### Basic Usage
|
|
440
|
-
|
|
441
|
-
```vue
|
|
442
|
-
<i18n-t keypath="welcomeMessage"></i18n-t>
|
|
443
|
-
```
|
|
444
|
-
|
|
445
|
-
This will render the translation associated with the key `welcomeMessage` using the current locale.
|
|
446
|
-
|
|
447
|
-
#### Pluralization
|
|
448
|
-
|
|
449
|
-
```vue
|
|
450
|
-
<i18n-t keypath="apples" :plural="10" tag="div"></i18n-t>
|
|
451
|
-
```
|
|
452
|
-
|
|
453
|
-
This will handle the pluralization for the translation key `apples` and render it inside a `div` element.
|
|
454
|
-
|
|
455
|
-
#### Interpolation with Parameters
|
|
456
|
-
|
|
457
|
-
```vue
|
|
458
|
-
<i18n-t keypath="greeting" :params="{ name: 'John' }"></i18n-t>
|
|
459
|
-
```
|
|
460
|
-
|
|
461
|
-
Assuming the translation string is `"Hello, {name}!"`, this will render `"Hello, John!"`.
|
|
462
|
-
|
|
463
|
-
#### Rendering with HTML Content
|
|
464
|
-
|
|
465
|
-
```vue
|
|
466
|
-
<i18n-t keypath="richText" :html="true"></i18n-t>
|
|
467
|
-
```
|
|
468
|
-
|
|
469
|
-
If `richText` contains HTML content like `"<strong>Welcome</strong> to our site!"`, setting `html` to `true` will render the HTML directly.
|
|
470
|
-
|
|
471
|
-
#### Using a Custom Locale
|
|
472
|
-
|
|
473
|
-
```vue
|
|
474
|
-
<i18n-t keypath="welcomeMessage" locale="fr"></i18n-t>
|
|
475
|
-
```
|
|
476
|
-
|
|
477
|
-
This will render the translation in French, overriding the application's current locale.
|
|
478
|
-
|
|
479
|
-
#### Conditional Rendering
|
|
480
|
-
|
|
481
|
-
```vue
|
|
482
|
-
<i18n-t keypath="optionalMessage" :hideIfEmpty="true"></i18n-t>
|
|
483
|
-
```
|
|
484
|
-
|
|
485
|
-
This will render nothing if the translation for `optionalMessage` is empty.
|
|
486
|
-
|
|
487
|
-
#### Custom Pluralization Rule
|
|
488
|
-
|
|
489
|
-
```vue
|
|
490
|
-
<i18n-t
|
|
491
|
-
keypath="items"
|
|
492
|
-
:plural="itemCount"
|
|
493
|
-
:customPluralRule="(value, count, locale) => {
|
|
494
|
-
return count === 1 ? 'One item' : value.replace('{count}', `${count}`)
|
|
495
|
-
}"></i18n-t>
|
|
496
|
-
```
|
|
497
|
-
|
|
498
|
-
This uses a custom function to handle the pluralization, bypassing the default logic.
|
|
499
|
-
|
|
500
|
-
### Advanced Example
|
|
501
|
-
|
|
502
|
-
```vue
|
|
503
|
-
<i18n-t
|
|
504
|
-
keypath="notifications"
|
|
505
|
-
:plural="unreadCount"
|
|
506
|
-
tag="p"
|
|
507
|
-
:params="{ username: 'Alice' }"
|
|
508
|
-
defaultValue="You have no notifications"
|
|
509
|
-
:html="false"
|
|
510
|
-
locale="en"
|
|
511
|
-
:wrap="true"
|
|
512
|
-
:hideIfEmpty="false">
|
|
513
|
-
</i18n-t>
|
|
514
|
-
```
|
|
515
|
-
|
|
516
|
-
### Slot Usage Example
|
|
517
|
-
|
|
518
|
-
Here's how you can use the slot and access the `translation` within it:
|
|
519
|
-
|
|
520
|
-
```vue
|
|
521
|
-
<i18n-t keypath="welcomeMessage">
|
|
522
|
-
<template #default="{ translation }">
|
|
523
|
-
<strong>{{ translation }}</strong>
|
|
524
|
-
</template>
|
|
525
|
-
</i18n-t>
|
|
526
|
-
```
|
|
527
|
-
|
|
528
|
-
### Explanation:
|
|
529
|
-
|
|
530
|
-
- **Slot Prop `translation`**:
|
|
531
|
-
- The component now provides `translation` as a slot prop, which can be accessed in the parent component’s slot content.
|
|
532
|
-
- In this example, the translation is wrapped in a `<strong>` tag, allowing you to apply custom styling or further modify how the translation is displayed.
|
|
533
|
-
|
|
534
|
-
---
|
|
535
|
-
|
|
536
|
-
The `<i18n-t>` component provides a powerful and flexible way to handle translations in your Nuxt application, accommodating a wide range of use cases from simple text translations to complex pluralization and HTML rendering scenarios.
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
### Layers
|
|
540
|
-
|
|
541
|
-
In `Nuxt I18n Micro`, you can use the concept of layers to manage localization settings in your application. This approach allows you to configure internationalization flexibly depending on the context, and it also enables you to create and extend locale configurations across different parts of your application.
|
|
542
|
-
|
|
543
|
-
#### Primary Configuration Layer
|
|
544
|
-
|
|
545
|
-
The primary configuration layer (`i18n`) sets the default localization settings used throughout the application. In this layer, you define the main locales, the order in which they are used, SEO settings, behavior for detecting the user's language, and other relevant parameters.
|
|
546
|
-
|
|
547
|
-
Example of a basic configuration in the primary layer:
|
|
548
|
-
|
|
549
|
-
```typescript
|
|
550
|
-
export default defineNuxtConfig({
|
|
551
|
-
i18n: {
|
|
552
|
-
locales: [
|
|
553
|
-
{ code: 'en', iso: 'en_EN' },
|
|
554
|
-
{ code: 'de', iso: 'de_DE' },
|
|
555
|
-
],
|
|
556
|
-
meta: true, // Enable automatic SEO meta tags generation
|
|
557
|
-
defaultLocale: 'en', // Default language
|
|
558
|
-
translationDir: 'locales', // Directory for translation files
|
|
559
|
-
autoDetectLanguage: true, // Automatically detect the user's language
|
|
560
|
-
},
|
|
561
|
-
})
|
|
562
|
-
```
|
|
563
|
-
|
|
564
|
-
#### Extending and Modifying Settings in Child Layers
|
|
565
|
-
|
|
566
|
-
Child layers allow you to extend or modify the configuration set in the primary layer. This is particularly useful if you need to adapt localization settings for specific contexts or sections of your application while retaining the overall base configuration.
|
|
567
|
-
|
|
568
|
-
Example of using a child layer:
|
|
569
|
-
|
|
570
|
-
```typescript
|
|
571
|
-
export default defineNuxtConfig({
|
|
572
|
-
extends: '../basic', // Inherit the base configuration layer
|
|
573
|
-
i18n: {
|
|
574
|
-
locales: [
|
|
575
|
-
{ code: 'ru', iso: 'ru_RU' }, // Add a new locale for Russian
|
|
576
|
-
{ code: 'de', disabled: true }, // Disable the locale for German
|
|
577
|
-
],
|
|
578
|
-
},
|
|
579
|
-
})
|
|
580
|
-
```
|
|
112
|
+
[Layers](https://s00d.github.io/nuxt-i18n-micro/guide/layers)
|
|
581
113
|
|
|
582
|
-
|
|
583
|
-
- We extend the base configuration layer using `extends: '../basic'`.
|
|
584
|
-
- In the child layer, we add a new locale `ru` for Russian.
|
|
585
|
-
- We disable the `de` locale by setting `disabled: true`.
|
|
114
|
+
[Seo](https://s00d.github.io/nuxt-i18n-micro/guide/seo)
|
|
586
115
|
|
|
587
|
-
|
|
116
|
+
[Migration](https://s00d.github.io/nuxt-i18n-micro/guide/migration)
|
|
588
117
|
|
|
589
|
-
|
|
118
|
+
[Contribution](https://s00d.github.io/nuxt-i18n-micro/guide/contribution)
|
|
590
119
|
|
|
591
|
-
For more details and updates, visit the [Nuxt I18n Micro GitHub repository](https://github.com/s00d/nuxt-i18n-micro).
|
package/dist/client/200.html
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<!DOCTYPE html><html data-capo=""><head><meta charset="utf-8">
|
|
2
2
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
3
3
|
<link rel="stylesheet" href="/__nuxt-i18n-micro/_nuxt/entry.CF1WZhsD.css">
|
|
4
|
-
<link rel="modulepreload" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/
|
|
4
|
+
<link rel="modulepreload" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/DUtCg1fH.js">
|
|
5
5
|
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/B6E6ObS_.js">
|
|
6
6
|
<link rel="prefetch" as="style" href="/__nuxt-i18n-micro/_nuxt/error-404.CjTTbIxB.css">
|
|
7
|
-
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/
|
|
8
|
-
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/
|
|
7
|
+
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/C5CUDaeR.js">
|
|
8
|
+
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/B5V5CGNX.js">
|
|
9
9
|
<link rel="prefetch" as="style" href="/__nuxt-i18n-micro/_nuxt/error-500.B4KzowuE.css">
|
|
10
|
-
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/
|
|
11
|
-
<script type="module" src="/__nuxt-i18n-micro/_nuxt/
|
|
12
|
-
<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-i18n-micro",buildId:"
|
|
10
|
+
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/a39Im4hm.js">
|
|
11
|
+
<script type="module" src="/__nuxt-i18n-micro/_nuxt/DUtCg1fH.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"serverRendered":1},false]</script>
|
|
12
|
+
<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-i18n-micro",buildId:"4583b4b6-b29c-448a-91a8-18c469a313df",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
|
package/dist/client/404.html
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<!DOCTYPE html><html data-capo=""><head><meta charset="utf-8">
|
|
2
2
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
3
3
|
<link rel="stylesheet" href="/__nuxt-i18n-micro/_nuxt/entry.CF1WZhsD.css">
|
|
4
|
-
<link rel="modulepreload" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/
|
|
4
|
+
<link rel="modulepreload" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/DUtCg1fH.js">
|
|
5
5
|
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/B6E6ObS_.js">
|
|
6
6
|
<link rel="prefetch" as="style" href="/__nuxt-i18n-micro/_nuxt/error-404.CjTTbIxB.css">
|
|
7
|
-
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/
|
|
8
|
-
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/
|
|
7
|
+
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/C5CUDaeR.js">
|
|
8
|
+
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/B5V5CGNX.js">
|
|
9
9
|
<link rel="prefetch" as="style" href="/__nuxt-i18n-micro/_nuxt/error-500.B4KzowuE.css">
|
|
10
|
-
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/
|
|
11
|
-
<script type="module" src="/__nuxt-i18n-micro/_nuxt/
|
|
12
|
-
<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-i18n-micro",buildId:"
|
|
10
|
+
<link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/a39Im4hm.js">
|
|
11
|
+
<script type="module" src="/__nuxt-i18n-micro/_nuxt/DUtCg1fH.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"serverRendered":1},false]</script>
|
|
12
|
+
<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-i18n-micro",buildId:"4583b4b6-b29c-448a-91a8-18c469a313df",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{i as o,r as u,g as f,h as d,j as v,k as l,l as i,m as h,n as m}from"./
|
|
1
|
+
import{i as o,r as u,g as f,h as d,j as v,k as l,l as i,m as h,n as m}from"./DUtCg1fH.js";function U(t,a={}){const e=a.head||o();if(e)return e.ssr?e.push(t,a):p(e,t,a)}function p(t,a,e={}){const s=u(!1),n=u({});f(()=>{n.value=s.value?{}:d(a)});const r=t.push(n.value,e);return v(n,c=>{r.patch(c)}),m()&&(l(()=>{r.dispose()}),i(()=>{s.value=!0}),h(()=>{s.value=!1})),r}export{U as u};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as a,o as s,c as i,a as e,t as o,b as u,w as c,d,e as l,p,f}from"./
|
|
1
|
+
import{_ as a,o as s,c as i,a as e,t as o,b as u,w as c,d,e as l,p,f}from"./DUtCg1fH.js";import{u as h}from"./B5V5CGNX.js";const g=t=>(p("data-v-c6c1efc1"),t=t(),f(),t),b={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},x=g(()=>e("div",{class:"fixed left-0 right-0 spotlight z-10"},null,-1)),m={class:"max-w-520px text-center z-20"},y=["textContent"],_=["textContent"],k={class:"w-full flex items-center justify-center"},w={__name:"error-404",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:404},statusMessage:{type:String,default:"Not Found"},description:{type:String,default:"Sorry, the page you are looking for could not be found."},backHome:{type:String,default:"Go back home"}},setup(t){const n=t;return h({title:`${n.statusCode} - ${n.statusMessage} | ${n.appName}`,script:[],style:[{children:'*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--un-default-border-color, #e5e7eb)}:before,:after{--un-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}h1{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}h1,p{margin:0}*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }'}]}),(z,S)=>{const r=l;return s(),i("div",b,[x,e("div",m,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:o(t.statusCode)},null,8,y),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:o(t.description)},null,8,_),e("div",k,[u(r,{to:"/",class:"gradient-border text-md sm:text-xl py-2 px-4 sm:py-3 sm:px-6 cursor-pointer"},{default:c(()=>[d(o(t.backHome),1)]),_:1})])])])}}},N=a(w,[["__scopeId","data-v-c6c1efc1"]]);export{N as default};
|