Content and i18n - Document not found for non-default locales

[vlamic]

Discussed in #2595

^{Originally posted by vlamic March 25, 2024}
Hi,

I'm trying to setup a project which is driven by content and supports multiple languages, so I have created two dirs in my content folder: en and es. When I try to access the default routes (e.g. http://localhost:3000/ or http://localhost:3000/about), it loads the pages correctly. However, when I try to access non-default pages, it's not able to locate the content (e.g. http://localhost:3000/en/about or http://localhost:3000/en). Am I missing something?

I have uploaded a sample project here: https://github.com/vlamic/content-app-test

Content structure:

Pages structure:

Nuxt config:

Thank you!

[RollingTL]

I have the same experience.

Detailed explanation: nuxt/nuxt#26699

[RollingTL]

ContentDoc problem

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.

QueryBuilderParams

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.

Code

Project with bug - with locales in content part of nuxt config:
https://github.com/RollingTL/Image-gallery-nuxt3-i18n/tree/test-content-list-renderer

• Select english and goto Gallery.
• Click any item in the list.
• Switch language to Deutch.

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

[idesignzone]

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.

[RollingTL]

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.

[johnson86tw]

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

[idesignzone]

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.

[IgorKha]

#2589 (comment)

[Cry0nicS]

@johnson86tw interesting. I've initially set it up just like you did here. GitHub didn't build it.
Then i switched to the other method. The change is very basic, like this: 0858770

Either way, none of them build.

Assuming this gets fixed with fi3ework/vite-plugin-checker#327 and updating vue-tsc to 2.x and Typescript to 5.5.x, which version would be better? Is there actually a difference?

[s00d]

Hello, I have a module called nuxt-i18n-micro, and I’ve added an integration example with Nuxt Content:

Nuxt Content Integration Example