Unable to query localized content in Nuxt Content with experimental clientDB and no SSR

[dxlliv]

Environment

Nuxt version: 3.14.159
Nuxt Content version: 2.13.4
SSR: false

Error happens during development and after server side content generation.

Reproduction

https://stackblitz.com/edit/sos-nuxt-content-npcvlj?file=nuxt.config.ts

It works with default language
https://sosnuxtcontent-ewna--3000--f565b097.local-credentialless.webcontainer.io/omg/error

but not with secondary languages
https://sosnuxtcontent-ewna--3000--f565b097.local-credentialless.webcontainer.io/it/omg/errore

Describe the bug

Hi, I'm experiencing an issue while querying localized content with Nuxt Content in a setup with SSR: false and experimental.clientDB enabled.

Following the suggestion in issue #2062, I enabled clientDB to make Nuxt Content work with static generation and ssr: false. Everything happily worked as expected until I tried filtering content by locale.

I'm on latest versions of Nuxt and Nuxt Content.
Here's a code example of how I'm filtering content by locale:

const myItems = ref([]);

await useAsyncData(queryContentKey, async () => {
  const document = await queryContent(queryContentKey).locale(locale.value).findOne()

  myItems.value = document.list
})

With .locale(locale.value) it doesn't retrieve anything, but if I disable the experimental DB client it works again.

Additional context

I'm using clientDB as suggested in issue #2062, because without it, querying content with SSR: false results in a 404 error on the generated content. I'm building an app with Capacitor and need to keep SSR: false; otherwise, the app size increases significantly (200MB with SSR vs. 24MB without).

[thorge]

I am encountering the same issue. In my previous project, which used "@nuxt/content": "^2.11.0", "nuxt": "^3.9.3" and "@nuxtjs/i18n": "^8.0.0", I did not need to specify the locale explicitly. The following code worked seamlessly across all locales:

const route = useRoute();

const { data, status, error, refresh } = await useAsyncData("page", () =>
  queryContent(route.path).findOne()
);

However, in my current setup using "@nuxt/content": "^2.13.4", "nuxt": "^3.14.1592" and "@nuxtjs/i18n": "^9.1.0",, I’m running into issues. Now this is my workaround:

const route = useRoute();
const localePath = useLocalePath();

const { data, status, error, refresh } = await useAsyncData("page", () =>
  queryContent(localePath(route.path)).findOne()
);

My files are located in content/{locale}/...

[hywax]

My solutions

// app/composables/usePageContent.ts
export function usePageContent() {
  const route = useRoute()
  const { locale } = useI18n()

  const normalizedRoute = route.path.replace(`/${locale.value}`, '')

  return useAsyncData(normalizedRoute, () => queryContent(normalizedRoute).locale(locale.value).findOne())
}

// page/*
<script setup lang="ts">
const { data } = await usePageContent()
</script>