You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -170,7 +164,6 @@ You can localize advanced URL paths using `useLocaleRoute`. This is useful if yo
170
164
171
165
It works like `useLocalePath` but returns a route resolved by Vue Router rather than a full route path. This can be useful as the path returned from `useLocalePath` may not carry all information from the provided input (for example, route params that the page doesn't specify).
Copy file name to clipboardExpand all lines: docs/content/docs/02.guide/03.custom-paths.md
+19-21Lines changed: 19 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -79,13 +79,13 @@ You have some routes with the following `pages` directory:
79
79
::callout{icon="i-heroicons-light-bulb"}
80
80
Nested/child routes rely on there being a page component with the same name as the folder that renders the child routes.
81
81
For more details, see [Nested Routes](https://nuxt.com/docs/guide/directory-structure/pages#nested-routes).
82
-
::
82
+
::
83
83
84
84
You would need to set up your `pages` property as follows:
85
85
86
86
```ts [nuxt.config.ts]
87
87
exportdefaultdefineNuxtConfig({
88
-
i18n: {
88
+
i18n: {
89
89
customRoutes: 'config',
90
90
pages: {
91
91
parent: {
@@ -158,7 +158,6 @@ If a custom path is missing for one of the locales, the `defaultLocale` custom p
158
158
159
159
Say you have some dynamic routes like:
160
160
161
-
162
161
```bash [Directory structure]
163
162
-| pages/
164
163
---| blog/
@@ -194,36 +193,35 @@ Path parameters parsing has been changed to match that of [Nuxt 3](https://nuxt.
194
193
195
194
You can use the `defineI18nRoute()`{lang="ts"} compiler macro to set custom paths for each page component.
196
195
197
-
```html {}[pages/about.vue]
196
+
```vue {}[pages/about.vue]
198
197
<script setup>
199
-
defineI18nRoute({
200
-
paths: {
201
-
en:'/about-us', // -> accessible at /about-us (no prefix since it's the default locale)
202
-
fr:'/a-propos', // -> accessible at /fr/a-propos
203
-
es:'/sobre'// -> accessible at /es/sobre
204
-
}
205
-
})
198
+
defineI18nRoute({
199
+
paths: {
200
+
en: '/about-us', // -> accessible at /about-us (no prefix since it's the default locale)
201
+
fr: '/a-propos', // -> accessible at /fr/a-propos
202
+
es: '/sobre' // -> accessible at /es/sobre
203
+
}
204
+
})
206
205
</script>
207
206
```
208
207
209
208
To configure a custom path for a dynamic route, you need to use it in double square brackets in the paths similarly to how you would do it in [Nuxt Dynamic Routes](https://nuxt.com/docs/guide/directory-structure/pages#dynamic-routes):
210
209
211
-
```html {}[pages/articles/[name\\].vue]
210
+
```vue {}[pages/articles/[name].vue]
212
211
<script setup>
213
-
defineI18nRoute({
214
-
paths: {
215
-
en:'/articles/[name]',
216
-
es:'/artículo/[name]'
217
-
}
218
-
})
212
+
defineI18nRoute({
213
+
paths: {
214
+
en: '/articles/[name]',
215
+
es: '/artículo/[name]'
216
+
}
217
+
})
219
218
</script>
220
219
```
221
220
222
221
::callout{icon="i-heroicons-light-bulb"}
223
222
`defineI18nRoute()`{lang="ts"} compiler macro is tree-shaken out at build time and is not included in the dist files.
224
223
::
225
224
226
-
227
225
## Dynamic route parameters
228
226
229
227
Dealing with dynamic route parameters requires a bit more work because you need to provide parameters translations to **Nuxt i18n module**. The composable `useSetI18nParams` can be used to set translations for route parameters, this is used to set SEO tags as well as changing the routes returned by `switchLocalePath`.
@@ -238,7 +236,7 @@ Components which have already been rendered do not update by changes introduced
238
236
This is not the case for SEO tags, these are updated correctly during SSR regardless of when and where i18n parameters are set.
239
237
240
238
:br:br
241
-
Check out the experimental [`switchLocalePathLinkSSR`](/docs/api/options#switchlocalepathlinkssr) feature, which combined with the [`<SwitchLocalePathLink>`{lang="html"}](/docs/components/switch-locale-path-link) component, correctly renders links during SSR regardless of where and when it is used.
239
+
Check out the experimental [`switchLocalePathLinkSSR`](/docs/api/options#switchlocalepathlinkssr) feature, which combined with the [`<SwitchLocalePathLink>`{lang="html"}](/docs/components/switch-locale-path-link) component, correctly renders links during SSR regardless of where and when it is used.
242
240
::
243
241
244
242
An example (replace `slug` with the applicable route parameter):
@@ -296,7 +294,7 @@ This experimental feature can be enabled as shown here:
Copy file name to clipboardExpand all lines: docs/content/docs/02.guide/90.migrating.md
+24-24Lines changed: 24 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,14 +7,13 @@ description: Follow this guide to upgrade from one major version to the other.
7
7
8
8
### Upgrade to Vue I18n v10
9
9
10
-
Vue I18n has been upgraded from v9 to v10. Vue I18n v10 has no major feature additions, but there are some disruptive changes, such as dropping some features that were deprecated in v9 and integrating the API `$tc()`{lang="ts"} into `$t()`{lang="ts"}, which can be used in the Legacy API style
10
+
Vue I18n has been upgraded from v9 to v10. Vue I18n v10 has no major feature additions, but there are some disruptive changes, such as dropping some features that were deprecated in v9 and integrating the API `$tc()`{lang="ts"} into `$t()`{lang="ts"}, which can be used in the Legacy API style
11
11
12
12
Check the documentation [here](https://vue-i18n.intlify.dev/guide/migration/breaking10.html#change-t-and-t-overloaded-signature-for-legacy-api-mode) for more information.
13
13
14
-
15
14
### Drop `jit` option
16
15
17
-
JIT compilation is now the default in Vue I18n v10.
16
+
JIT compilation is now the default in Vue I18n v10.
@@ -25,8 +24,9 @@ Accordingly, the `jit` option in Nuxt I18n v8 is no longer needed, so this optio
25
24
We now use a default directory structure that is consistent with [directory structure changes in Nuxt 4](https://nuxt.com/docs/getting-started/upgrade#new-directory-structure).
26
25
27
26
What changed
28
-
*`langDir` now defaults to `'locales'`{lang="ts"}.
29
-
* All i18n files are resolved relative to `<rootDir>/i18n`, this can be configured with the `restructureDir` option.
27
+
28
+
-`langDir` now defaults to `'locales'`{lang="ts"}.
29
+
- All i18n files are resolved relative to `<rootDir>/i18n`, this can be configured with the `restructureDir` option.
30
30
31
31
Here is an example of a project structure after this change:
32
32
@@ -43,8 +43,9 @@ nuxt.config.ts
43
43
```
44
44
45
45
Reasons for change
46
-
1. Context - i18n files are used both server-side and client-side, using a dedicated `i18n/` folder in the root directory outside `app/` and `server/` makes more sense.
47
-
2. Clean - less clutter/fragmentation of i18n files, and should make resolving and loading files easier for us.
46
+
47
+
1. Context - i18n files are used both server-side and client-side, using a dedicated `i18n/` folder in the root directory outside `app/` and `server/` makes more sense.
48
+
2. Clean - less clutter/fragmentation of i18n files, and should make resolving and loading files easier for us.
48
49
49
50
To ease the migration to v9 you can disable this feature by setting `restructureDir: false`{lang="ts"}, this will be removed in v10.
50
51
@@ -56,29 +57,29 @@ The `iso` property on a locale object has been renamed to `language` to be consi
56
57
57
58
Some properties have changed or swapped names to better fit their functionality, the runtime config properties configured by this module are mostly used for internal purposes and should not be relied upon but it's worth noting these changes.
58
59
59
-
| v8 | v9 | Notes |
60
-
| --- | --- | --- |
61
-
|`locales`|`domainLocales`| This also changes the environment variable key to `NUXT_PUBLIC_I18N_DOMAIN_LOCALES_{code}_DOMAIN`, see [`runtimeConfig`](/docs/api/runtime-config#domainLocales)|
|`locales`|`domainLocales`| This also changes the environment variable key to `NUXT_PUBLIC_I18N_DOMAIN_LOCALES_{code}_DOMAIN`, see [`runtimeConfig`](/docs/api/runtime-config#domainLocales)|
63
+
|`configLocales`|`locales`||
63
64
64
65
### SEO - `useLocaleHead()`{lang="ts"}
65
66
66
67
The options parameter for `useLocaleHead()`{lang="ts"} and `$localeHead()`{lang="ts"} has changed in shape, having less verbose property names, as well as enabling the options by default.
67
68
68
69
This table compares the option properties of `useLocaleHead()`{lang="ts"} and `$localeHead()`{lang="ts"} for v8 and v9:
69
70
70
-
| v8 | v9 | Notes |
71
-
| --- | --- | --- |
72
-
|`-`|`lang`| New property to configure the `lang` html attributes, default: `true`|
We have added a `lang` property to the options parameter of `useLocaleHead()`{lang="ts"} and `$localeHead()`{lang="ts"}, originally this was not configurable on its own, see [`useLocaleHead()`{lang="ts"}](/docs/composables/use-locale-head) for details on its usage.
78
79
79
80
### Nuxt context functions
80
81
81
-
In v8 both the types and name of the injected context functions (such as `$localePath()`{lang="ts"}, `$switchLocalePath()`{lang="ts"} and [more](/docs/api/nuxt)) did not work as intended. You may have found that these functions worked when using them without prefix (`$`) even when not assigning these functions from a composable.
82
+
In v8 both the types and name of the injected context functions (such as `$localePath()`{lang="ts"}, `$switchLocalePath()`{lang="ts"} and [more](/docs/api/nuxt)) did not work as intended. You may have found that these functions worked when using them without prefix (`$`) even when not assigning these functions from a composable.
82
83
83
84
The types and names have been fixed in v9, if you have been using the unprefixed functions globally (without composable) in your project you will have to prefix these functions as they were originally intended.
84
85
@@ -96,7 +97,7 @@ Setting dynamic route parameters by setting the `nuxtI18n` property with `define
96
97
97
98
The composable usage is similar to that of the deprecated implementation, see the migration example below:
98
99
99
-
```html
100
+
```vue
100
101
<script>
101
102
definePageMeta({
102
103
nuxtI18n: {
@@ -112,12 +113,12 @@ definePageMeta({
112
113
113
114
Should be changed to:
114
115
115
-
```html
116
+
```vue
116
117
<script>
117
-
constsetI18nParams=useSetI18nParams();
118
+
const setI18nParams = useSetI18nParams()
118
119
setI18nParams({
119
-
en: { id:'my-post' },
120
-
fr: { id:'mon-article' }
120
+
en: { id: 'my-post' },
121
+
fr: { id: 'mon-article' }
121
122
})
122
123
</script>
123
124
<template>
@@ -127,7 +128,6 @@ setI18nParams({
127
128
128
129
Check out the [Lang Switcher](/docs/guide/lang-switcher#dynamic-route-parameters) guide for more details.
129
130
130
-
131
131
## Upgrading from `nuxtjs/i18n` v7.x to v8.x
132
132
133
133
### Deprecated `vueI18n` option to not accept `createI18n` options
Copy file name to clipboardExpand all lines: docs/content/docs/04.api/00.options.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -65,8 +65,6 @@ The Vue I18n `messages` option should be returned **by the plain object**.
65
65
That will be pre-compiled in the nuxt i18n module via vue-i18n message-compiler as an executable message in the vue-i18n runtime.
66
66
::
67
67
68
-
69
-
70
68
## baseUrl
71
69
72
70
- type: `string | Function`{lang="ts-type"}
@@ -150,6 +148,7 @@ When using an object form, the properties can be:
150
148
- Set `domainDefault` to `true` for each locale that should act as a default locale for the particular domain. This property is required when using [`differentDomains`](/docs/api/options#differentdomains) while one or more of the domains having multiple locales
151
149
152
150
### `...`
151
+
153
152
- any custom property set on the object will be exposed at runtime. This can be used, for example, to define the language name for the purpose of using it in a language selector on the page.
154
153
155
154
You can access all the properties of the current locale through the `localeProperties` property. When using an array of codes, it will only include the `code` property.
@@ -530,7 +529,7 @@ Configure the `i18n` custom blocks of SFC.
0 commit comments