I am working on a Nuxt.js
project that uses @nuxt/content
and @nuxtjs/i18n
modules to create a localized blog.
If I use content/blog/hellow-world.md
the page works fine and the content gets fetched just fine, but if I tried to localize the content folder by creating separate language folders like this :
content/en/blog/hellow-world.md
and changing the fetching method inside blog/index
file to include the locale
like this :
const i18n = useI18n()
const {data: posts} = await useAsyncData('get-all-posts', () => {
return queryContent(i18n.locale.value + '/blog').sort({date: -1}).find()
})
then the blog posts are not shown, and I get 404 (Document not found!)
this is the repo link : https://github.com/abdurrahmanseyidoglu/personal-website-nuxt
nuxt.config.ts
:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
// Devtools
devtools: {enabled: true},
modules: [
'@nuxt/content',
"@nuxtjs/google-fonts",
"@nuxtjs/i18n",
"nuxt-icon",
"@nuxtjs/tailwindcss"
],
// Nuxt Content options
content: {
documentDriven: {},
highlight: {
theme: 'github-dark'
},
contentHead:true,
defaultLocale: 'en',
locales: ['en', 'ar']
},
googleFonts: {
families: {
'Roboto Mono': [400, 500, 600, 700]
}
},
i18n: {
vueI18n: './i18n.config.ts',
strategy: 'prefix_except_default',
locales: [
{
"code": 'en',
"iso": 'en-US',
"file": "en-US.ts",
"dir": "ltr",
//Custom Properties
"langName": "English"
},
{
"code": 'ar',
"iso": 'ar-SY',
"dir": 'rtl',
"file": "ar-SY.ts",
//Custom Properties
"langName": "العربيّة"
}
],
defaultLocale: 'en',
lazy: true,
langDir: 'lang',
}
})
this is my project tree:
.
├── app.vue
├── assets
│ └── global_scss
│ ├── _breakpoints-mixin.scss
│ ├── global-styles.scss
│ ├── _reset.scss
│ └── _variables.scss
├── components
│ ├── content
│ │ └── MdCustomLink.vue
│ ├── CustomLink
│ │ ├── CustomLink.scss
│ │ └── CustomLink.vue
│ ├── EmploymentCard
│ │ ├── EmploymentCard.scss
│ │ └── EmploymentCard.vue
│ ├── Footer
│ │ ├── Footer.scss
│ │ └── Footer.vue
│ ├── Navbar
│ │ ├── Navbar.scss
│ │ └── Navbar.vue
│ └── Tag
│ ├── Tag.scss
│ └── Tag.vue
├── content
│ ├── ar
│ │ └── blog
│ │ └── hello-world.md
│ └── en
│ └── blog
│ └── hello-world.md
├── i18n.config.ts
├── lang
│ ├── ar-SY.ts
│ └── en-US.ts
├── nuxt.config.ts
├── package.json
├── package-lock.json
├── pages
│ ├── blog
│ │ ├── index
│ │ │ ├── index.scss
│ │ │ └── index.vue
│ │ └── [...slug].vue
│ ├── index.scss
│ └── index.vue
├── public
│ ├── favicon.ico
│ └── images
│ ├── blog
│ │ ├── clement-helardot-95YRwf6CNw8-unsplash.jpg
│ │ ├── karl-pawlowicz-QUHuwyNgSA0-unsplash.jpg
│ │ └── nasa-Q1p7bh3SHj8-unsplash.jpg
│ └── my-icon.png
├── README.md
├── server
│ └── tsconfig.json
├── tailwind.config.ts
├── Todo.md
└── tsconfig.json