Open vlamic opened 3 months ago
I have the same experience.
Detailed explanation: https://github.com/nuxt/nuxt/discussions/26699
If we use nuxt.config.ts
content: {
locales: ['en', 'de', 'ru'],
defaultLocale: 'en'
}
it is working with only default language.
Child code [id].vue
<ContentDoc v-slot="{ doc }">
<h1>{{ doc.title }}</h1>
<h2>{{ doc.description }}</h2>
</ContentDoc>
Even if we provide path:
<ContentDoc v-slot="{ doc }" :path="route.path">
<h1>{{ doc.title }}</h1>
<h2>{{ doc.description }}</h2>
</ContentDoc>
it is not working.
Renderes only default language and cant see de/gallery/001 or de/gallery/001.
When we don't add content part to nuxt.config
, and hence using route parameter:
<ContentDoc :path="localePath(route.path)" v-slot="{ doc }">
<h1>{{ doc.title }}</h1>
<h2>{{ doc.description }}</h2>
</ContentDoc>
works nicely.
If we place locale info into
nuxt.config.ts
content: {
locales: ['en', 'de', 'ru'],
defaultLocale: 'en'
}
Than I expect that following code:
const query: QueryBuilderParams = {
_path: '/gallery'
}
will give me results for every locale. However it works only with default locale.
Project with bug - with locales in content part of nuxt config: https://github.com/RollingTL/Image-gallery-nuxt3-i18n/tree/test-content-list-renderer
Working project - without locales in content part of nuxt config and dynmyc paths: https://github.com/RollingTL/Image-gallery-nuxt3-i18n/tree/test-content-no-config
Nuxt content is not compatible with i18n module at the moment. I've spent a good amount of time building my blog and adding articles before going live. Everything works in development but once published to production, only default language is loading. (A Nitro matter probably) This is a serious matter for multilingual cases and needs immediate attention. I've already started migrating out of Nuxt content as I see no response either here or on other similar issue. Looking forward and hoping Nuxt content devs finally takes care of this problem.
Nuxt content is not compatible with i18n module at the moment. I've spent a good amount of time building my blog and adding articles before going live. Everything works in development but once published to production, only default language is loading. (A Nitro matter probably) This is a serious matter for multilingual cases and needs immediate attention. I've already started migrating out of Nuxt content as I see no response either here or on other similar issue. Looking forward and hoping Nuxt content devs finally takes care of this problem.
Look here - https://github.com/RollingTL/Image-gallery-nuxt3-i18n/tree/test-content-no-config I managed to make it work even in production but with some workaround. The trick is not to include languages in nuxt config and provide correct routes for QueryBuilderParams and ContentDoc.
Agree that Nuxt content devs are not very active.
My solution is also removing locale config in nuxt content.
Don't add the following
content: {
locales: ['en', 'de', 'ru'],
defaultLocale: 'en'
}
and using ContentRenderer to render the content based on the locale folder.
content
└─ en
└─ overview.md
└─ zh-TW
└─ overview.md
<script setup lang="ts">
const route = useRoute()
const { locale } = useI18n()
/**
* @docs queryContent https://content.nuxt.com/composables/query-content
*/
async function fetchContent() {
try {
return await queryContent(locale.value.toLowerCase(), route.path).findOne()
} catch (err: any) {
return await queryContent(route.path).findOne()
}
}
/**
* @docs https://nuxt.com/docs/api/composables/use-async-data
*/
const { data } = await useAsyncData('content', () => fetchContent(), {
watch: [locale],
})
</script>
<template>
<main class="py-5 px-5 sm:px-10 break-words">
<ContentRenderer class="prose prose-zinc" :value="data">
<template #empty>
<p>Stay tuned; it will be added later 😉</p>
</template>
</ContentRenderer>
</main>
</template>
This is my nuxt.config
content: {
highlight: {
theme: 'github-dark',
langs: ['json', 'js', 'ts', 'html', 'css', 'vue', 'shell', 'mdc', 'md', 'yaml', 'solidity'],
},
},
i18n: {
vueI18n: './i18n.config.ts',
strategy: 'no_prefix',
locales: [
{
label: 'English',
code: 'en',
iso: 'en',
},
{
label: '繁體中文',
code: 'zh-TW',
iso: 'zh-TW',
},
],
},
My project is at https://vuedapp.xyz
Nuxt content is not compatible with i18n module at the moment. I've spent a good amount of time building my blog and adding articles before going live. Everything works in development but once published to production, only default language is loading. (A Nitro matter probably) This is a serious matter for multilingual cases and needs immediate attention. I've already started migrating out of Nuxt content as I see no response either here or on other similar issue. Looking forward and hoping Nuxt content devs finally takes care of this problem.
Look here - https://github.com/RollingTL/Image-gallery-nuxt3-i18n/tree/test-content-no-config I managed to make it work even in production but with some workaround. The trick is not to include languages in nuxt config and provide correct routes for QueryBuilderParams and ContentDoc.
Agree that Nuxt content devs are not very active.
This solution worked for me only after setting prerender to true for the routes.
Discussed in https://github.com/nuxt/content/discussions/2595