Better i18n #3579
Description
Initially I added my thoughts as a comment in #3509 , but as I added more and more thoughts I decided to open a specific issue about i18n. I am currently migrating our website from a big headless CMS to Nuxt Content and I feel like Nuxt Content i18n needs to be massively improved / reworked to have a nice and solid solution that works as amazing as the rest of Nuxt Content does.
Introduction
The admin should create collections once, then add content for the default language and can then translate the fields. When a page or a field of a page is missing translation, it should fallback to the default locale. Also, slugs should be translatable as well and a page should know all alternate locale slugs for a language switcher and for seo tags to work.
In general, maybe take a look at the "big players" how they do it from a UI perspective, e.g. in no particular order: Contentful, Storyblok, Sanity, Directus, Strapi. This is where my thoughts come from.
Must haves
- A default locale should be set (or better: inherited from what is set by nuxt-i18n)
- A collection should be defined only once, not once per locale. Currently we need to duplicated collections for each locale. If having 20 languages one needs to define the exact same collections with same schemas 20 times. So we have duplicate code (collections count * locales count).
- There needs to be a connection between pages of different locales. We need to be able to query all alternate slugs for nuxt-i18n defineI18nRoute() to make a language switcher work as well as nuxt-seo hreflang alternate link generation (important for seo!)
- Slugs should be translatable, e.g. default is
products.mdwith slug 'en/products' and has translated slugs: 'de/produkte', 'fr/produits', etc., but somehow they need to have a connection (for previous point) - Querying needs to be simplified. Currently it only works by setting locale-collection AND locale-path:
queryCollection('blog_' + locale.value).path(locale.value + '/' + slug).first()(depending on nuxt-i18n routing strategy). Maybe something like:queryCollection('blog').path(slug, { locale: locale.value }); - When a page is not translated to a specific language, it should fall back to the default language
- When a certain field of a page is not translated, it should fall back to the default language field
- In Nuxt Studio, when viewing a content page it should have a language select
- In Nuxt Studio, when editing a language that is NOT the default language it should display the content of the original language above each field (for help with translation). Screenshot from Storyblok:
Nice to haves
- If the content of a field changed in the default language, an alert can be displayed for all other languages. This would be incredibly helpful for translators.
- Possibly one wants to hide specific content for specific locales or add pages/content just for a specific locale that differ from default language.
- An integration with apis like DeepL or Google Translate would be cool. When viewing a page in non-default language, a translate button could be shown above each content field. When clicked, the default language content will automatically translated and inserted as a value of the field.
- A super cool feature would also be: Let an external tool, like DeepL, translate ALL content. Either once on build (but then it needs to be aware/smart and not translate what has already been translated and did not change), OR on demand when viewing a certain page in a certain language (and then cache the result).