nuxt / content

The file-based CMS for your Nuxt application, powered by Markdown and Vue components.
https://content.nuxt.com
MIT License
3.13k stars 627 forks source link

queryContent does not support i18n #2589

Open 814704261 opened 8 months ago

814704261 commented 8 months ago

Environment

Reproduction

.

Describe the bug

i18n config

{
      i18n: {
        strategy: 'prefix_except_default',
        defaultLocale: 'zh',
        locales: ['zh', 'en']
      }
}

content config

{
    content: {
            locales: ['zh', 'en'],
            defaultLocale: 'zh',
    }
}

Problem Description

When my address is http://localhost:3000/en/doc/tutorial/getting , queryContent cannot find the document

const localePath = useLocalePath()

const route = useRoute()
const { data: articles } = await useAsyncData('page-doc', () =>
  queryContent<CommonParsedContent>(localePath(route.path)).findOne()
)

What I can guarantee is that the output of localPath(route. path) is en/doc/tutorial/getting started

Directory structure

image image

Additional context

No response

Logs

No response

IgorKha commented 5 months ago

I figured out how to do this!

folder tree:

content
├── EN
│   ├── 0.index.yml
│   ├── 1.docs
│   │   ├── 1.getting-started
│   │   │   ├── 1.index.md
│   │   │   ├── 2.installation.md
│   │   │   └── _dir.yml
│   │   └── _dir.yml
│   ├── 2.pricing.yml
│   ├── 3.blog
│   │   ├── 1.asian-cuisine.md
│   │   ├── 2.pyrenees.md
│   │   ├── 3.james-webb.md
│   │   ├── 4.meditation.md
│   │   ├── 5.animals.md
│   │   ├── 6.cryptocurrencies.md
│   │   └── 7.nuxt-ui.md
│   └── 3.blog.yml
└── RU
    └── 0.index.yml

nuxt.config.ts

content: {
    defaultLocale: 'EN',
    locales: ['EN', 'BG', 'RU', 'FR']
  },
i18n: {
    vueI18n: './i18n.config.ts',
    types: 'composition',
    strategy: 'prefix_and_default',
    defaultLocale: 'EN',
    lazy: true,
    langDir: 'locales',
    locales: [
                  ........
     ]
.....

index.vue

....
const { locale: { value: localCode } } = useI18n()

const { data: page } = await useAsyncData('index', () => queryContent().locale(localCode).findOne())
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
....
marcbejar commented 5 months ago

@IgorKha Solution works for me. But now I have the same problem with ContentList. Did you manage to get it work?

<ContentList :query="{path: localePath('/someblog')}">
  <template #default="{ list }">

  </template>
</ContentList>

This only gives me the list of the default locale content.

farnabaz commented 4 months ago

@marcbejar You can pass locale to ContentList

<ContentList :query="{ path: '/someblog', locale: localCode }">
  <template #default="{ list }">

  </template>
</ContentList>
marcbejar commented 4 months ago

Thank You!! @farnabaz . This worked perfectly!

narr07 commented 4 months ago

How to use on document-driven with [...slug].vue as index page?