- The content does not exist. Please try another one. + {{ $t("error.description") }}
Templatr
{{ $t("welcome") }}
+ +``` + +With this in place, Nuxt is smart enough to render out "Welcome" or "Bienvenue" correctly when the language context changed. + +### Locales File Definition + +While the above solution of adding new definition of words in the `nuxt.config.ts` file works, it can pose a real problem when the **vocabulary grows** as the file become cumbersome to maintain. + +Fortunately, there is another preferred way to store the language definitions in their own, seperate JSON file. With this approach, not only it achieves the Single Responsibility Principle, it also drastically improve the maintainability of the files. + +Here is how it is configured in `nuxt.config.ts`. + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + i18n: { + langDir: "locales", + locales: [ + { + code: "en", + file: "en.json", + }, + { + code: "fr", + file: "fr.json", + }, + ], + }, +}); +``` + +The above code tells Nuxt to locate English definition in `en.json` file and French definition in `fr.json` file inside the `locales` folder. + +### I18n in Nuxt Content + +To support internationalization for Markdown based contents from Nuxt Content, create a corresponsing folder inside the `content` folder with the non-default locale's code and imitate the structure of the base folder. + +For example, given I have the following file structure that has English contents, the French contents can be housed in the following manner. + +From: + +```[Directory Structure] +├─ content +│ ├─ blogs +│ │ ├─ blog1.md +│ │ └─ blog2.md +│ ├─ demo.md +│ └─ guide.md +``` + +To: + +```[Directory Structure] +├─ content +│ ├─ blogs +│ │ ├─ blog1.md (English) +│ │ └─ blog2.md (English) +│ ├─ fr +│ │ ├─ blogs +│ │ │ ├─ blog1.md (French) +│ │ │ └─ blog2.md (French) +│ │ ├─ demo.md (French) +│ │ └─ guide.md (French) +│ ├─ demo.md (English) +│ └─ guide.md (English) +``` + +By doing this, we are utilizing the behaviour of the prefixed URL for non-default locale and it does the trick. Not the most elegant solution but it works for now. + +### Internationalized Links + +To make sure that every links in the website corresponds to its language counterparts, we have to preprocess the links with the `useLocalePath` composable. Here is how it looks like in code. + +```vue + + + +