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

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[caiotarifa]

Important issue. There must be an official solution to this problem. We cannot let this issue be closed.

[AssetCEO]

I also agree that this is an important issue. If i18n cannot be integrated, the practicality of this module will be significantly reduced. The ability to integrate i18n would be a major boost in promoting this module. We need official support.

[IgorKha]

Friends, As I understand, this functionality appeared in 3.x version

https://github.com/nuxt/content/tree/main/examples/i18n

But I haven't had a chance to check it myself yet

[AssetCEO]

@IgorKha Thank you for providing the information. Unfortunately, the example in the provided link is not based on the Content Docs template. Therefore, we are unable to derive a solution to the issue from that example.

The main problem we are facing is that after integrating Nuxt i18n, both the navigation and the search function are not working properly.

// App.vue
const { locale } = useI18n()
// Get data of pages for Navigation UI: <UContentNavigation>
const { data: navigation } = await useAsyncData(
  "navigation",
  () => queryCollectionNavigation( locale.vale ),
  {
    transform: (data) => data[0].children,
  }
);

// Get data of pages for Search UI: <LazyUContentSearch>
const { data: files } = useLazyAsyncData(
  "search",
  () => queryCollectionSearchSections( locale.vale ),
  {
    server: false,
  }
);

You will only get partial results from the above code, meaning that the navigation content or searchable pages will only appear partially or even less. Additionally, the code does not throw any errors.