From dc84e223b442d1ca8d5f451d4a8497bfd3074767 Mon Sep 17 00:00:00 2001 From: Farnabaz Date: Tue, 22 Jul 2025 12:36:47 +0200 Subject: [PATCH 1/2] docs: create examples and integrations section --- docs/_redirects | 1 + .../docs/7.integrations/.navigation.yml | 2 + docs/content/docs/7.integrations/01.i18n.md | 138 ++++++++++++++++++ .../7.llms.md => 7.integrations/02.llms.md} | 2 +- .../.navigation.yml | 0 .../1.fulltext-search.md | 0 .../2.raw-content.md | 0 .../{7.advanced => 8.advanced}/3.database.md | 0 .../{7.advanced => 8.advanced}/4.tools.md | 0 .../{7.advanced => 8.advanced}/5.hooks.md | 0 .../6.custom-source.md | 0 .../8.transformers.md | 0 .../{8.studio => 9.studio}/.navigation.yml | 0 .../docs/{8.studio => 9.studio}/1.setup.md | 0 .../docs/{8.studio => 9.studio}/2.github.md | 0 .../docs/{8.studio => 9.studio}/3.content.md | 0 .../docs/{8.studio => 9.studio}/4.medias.md | 0 .../docs/{8.studio => 9.studio}/5.config.md | 0 .../docs/{8.studio => 9.studio}/6.debug.md | 0 19 files changed, 142 insertions(+), 1 deletion(-) create mode 100644 docs/content/docs/7.integrations/.navigation.yml create mode 100644 docs/content/docs/7.integrations/01.i18n.md rename docs/content/docs/{7.advanced/7.llms.md => 7.integrations/02.llms.md} (99%) rename docs/content/docs/{7.advanced => 8.advanced}/.navigation.yml (100%) rename docs/content/docs/{7.advanced => 8.advanced}/1.fulltext-search.md (100%) rename docs/content/docs/{7.advanced => 8.advanced}/2.raw-content.md (100%) rename docs/content/docs/{7.advanced => 8.advanced}/3.database.md (100%) rename docs/content/docs/{7.advanced => 8.advanced}/4.tools.md (100%) rename docs/content/docs/{7.advanced => 8.advanced}/5.hooks.md (100%) rename docs/content/docs/{7.advanced => 8.advanced}/6.custom-source.md (100%) rename docs/content/docs/{7.advanced => 8.advanced}/8.transformers.md (100%) rename docs/content/docs/{8.studio => 9.studio}/.navigation.yml (100%) rename docs/content/docs/{8.studio => 9.studio}/1.setup.md (100%) rename docs/content/docs/{8.studio => 9.studio}/2.github.md (100%) rename docs/content/docs/{8.studio => 9.studio}/3.content.md (100%) rename docs/content/docs/{8.studio => 9.studio}/4.medias.md (100%) rename docs/content/docs/{8.studio => 9.studio}/5.config.md (100%) rename docs/content/docs/{8.studio => 9.studio}/6.debug.md (100%) diff --git a/docs/_redirects b/docs/_redirects index e4dbf7fe1..7ceca1ade 100644 --- a/docs/_redirects +++ b/docs/_redirects @@ -12,6 +12,7 @@ /api/components/prose=/docs/components/prose /api/configuration=/docs/getting-started/configuration /recipes/hooks=/docs/advanced/hooks +/docs/advanced/llms=/docs/integrations/llms # Content v2 redirects /guide/writing/content-directory=https://v2.content.nuxt.com/usage/content-directory diff --git a/docs/content/docs/7.integrations/.navigation.yml b/docs/content/docs/7.integrations/.navigation.yml new file mode 100644 index 000000000..fe62dfc17 --- /dev/null +++ b/docs/content/docs/7.integrations/.navigation.yml @@ -0,0 +1,2 @@ +title: Examples & Integrations +icon: i-lucide-cloud-upload diff --git a/docs/content/docs/7.integrations/01.i18n.md b/docs/content/docs/7.integrations/01.i18n.md new file mode 100644 index 000000000..6bbf2c695 --- /dev/null +++ b/docs/content/docs/7.integrations/01.i18n.md @@ -0,0 +1,138 @@ +--- +title: I18n module +--- + +Nuxt Content works with the `@nuxtjs/i18n` module to create multi-language websites. + +Setting up I18n with Nuxt Content takes three steps: + +1. **Prepare your documents**: Create separate collections for each language +2. **Configure I18n in Nuxt**: Set up the `i18n` module in `nuxt.config.ts` +3. **Fetch and render content**: Create pages that load content based on the current locale + +## Step 1: Define Collections for Each Language + +Create separate collections for each language in your `content.config.ts`: + + + +```ts [content.config.ts] +const commonSchema = ...; + +export default defineContentConfig({ + collections: { + // English content collection + content_en: defineCollection({ + type: 'page', + source: { + include: 'en/**', + prefix: '', + }, + schema: commonSchema, + }), + // French content collection + content_fr: defineCollection({ + type: 'page', + source: { + include: 'fr/**', + prefix: '', + }, + schema: commonSchema, + }), + // Farsi content collection + content_fa: defineCollection({ + type: 'page', + source: { + include: 'fa/**', + prefix: '', + }, + schema: commonSchema, + }), + }, +}) +``` + +## Step 2: Configure I18n Module + +Set up your languages and routing strategy in `nuxt.config.ts`: + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + // ... + i18n: { + locales: [ + { code: 'en', name: 'English', language: 'en-US', dir: 'ltr' }, + { code: 'fr', name: 'French', language: 'fr-FR' }, + { code: 'fa', name: 'Farsi', language: 'fa-IR', dir: 'rtl' }, + ], + strategy: 'prefix_except_default', + defaultLocale: 'en', + } +}) +``` + +## Step 3: Create Dynamic Pages + +Create a catch-all page that fetches content based on the current locale: + +```vue [pages/\[...slug\].vue] + + + +``` + + +## Content Structure + +Organize your content files in language-specific folders: + +``` +content/ + en/ + index.md + about.md + blog/ + post-1.md + fr/ + index.md + about.md + blog/ + post-1.md + fa/ + index.md + about.md +``` + +## Complete Examples + +You can see a complete working example: +- **Source**: https://github.com/nuxt/content/tree/main/examples/i18n +- **Live Demo**: https://content3-i18n.nuxt.dev/ \ No newline at end of file diff --git a/docs/content/docs/7.advanced/7.llms.md b/docs/content/docs/7.integrations/02.llms.md similarity index 99% rename from docs/content/docs/7.advanced/7.llms.md rename to docs/content/docs/7.integrations/02.llms.md index 97656b35b..d33104754 100644 --- a/docs/content/docs/7.advanced/7.llms.md +++ b/docs/content/docs/7.integrations/02.llms.md @@ -1,5 +1,5 @@ --- -title: LLMs Integration +title: LLMs module description: Learn how to generate AI-ready content files using Nuxt Content and the Nuxt LLMs module. --- diff --git a/docs/content/docs/7.advanced/.navigation.yml b/docs/content/docs/8.advanced/.navigation.yml similarity index 100% rename from docs/content/docs/7.advanced/.navigation.yml rename to docs/content/docs/8.advanced/.navigation.yml diff --git a/docs/content/docs/7.advanced/1.fulltext-search.md b/docs/content/docs/8.advanced/1.fulltext-search.md similarity index 100% rename from docs/content/docs/7.advanced/1.fulltext-search.md rename to docs/content/docs/8.advanced/1.fulltext-search.md diff --git a/docs/content/docs/7.advanced/2.raw-content.md b/docs/content/docs/8.advanced/2.raw-content.md similarity index 100% rename from docs/content/docs/7.advanced/2.raw-content.md rename to docs/content/docs/8.advanced/2.raw-content.md diff --git a/docs/content/docs/7.advanced/3.database.md b/docs/content/docs/8.advanced/3.database.md similarity index 100% rename from docs/content/docs/7.advanced/3.database.md rename to docs/content/docs/8.advanced/3.database.md diff --git a/docs/content/docs/7.advanced/4.tools.md b/docs/content/docs/8.advanced/4.tools.md similarity index 100% rename from docs/content/docs/7.advanced/4.tools.md rename to docs/content/docs/8.advanced/4.tools.md diff --git a/docs/content/docs/7.advanced/5.hooks.md b/docs/content/docs/8.advanced/5.hooks.md similarity index 100% rename from docs/content/docs/7.advanced/5.hooks.md rename to docs/content/docs/8.advanced/5.hooks.md diff --git a/docs/content/docs/7.advanced/6.custom-source.md b/docs/content/docs/8.advanced/6.custom-source.md similarity index 100% rename from docs/content/docs/7.advanced/6.custom-source.md rename to docs/content/docs/8.advanced/6.custom-source.md diff --git a/docs/content/docs/7.advanced/8.transformers.md b/docs/content/docs/8.advanced/8.transformers.md similarity index 100% rename from docs/content/docs/7.advanced/8.transformers.md rename to docs/content/docs/8.advanced/8.transformers.md diff --git a/docs/content/docs/8.studio/.navigation.yml b/docs/content/docs/9.studio/.navigation.yml similarity index 100% rename from docs/content/docs/8.studio/.navigation.yml rename to docs/content/docs/9.studio/.navigation.yml diff --git a/docs/content/docs/8.studio/1.setup.md b/docs/content/docs/9.studio/1.setup.md similarity index 100% rename from docs/content/docs/8.studio/1.setup.md rename to docs/content/docs/9.studio/1.setup.md diff --git a/docs/content/docs/8.studio/2.github.md b/docs/content/docs/9.studio/2.github.md similarity index 100% rename from docs/content/docs/8.studio/2.github.md rename to docs/content/docs/9.studio/2.github.md diff --git a/docs/content/docs/8.studio/3.content.md b/docs/content/docs/9.studio/3.content.md similarity index 100% rename from docs/content/docs/8.studio/3.content.md rename to docs/content/docs/9.studio/3.content.md diff --git a/docs/content/docs/8.studio/4.medias.md b/docs/content/docs/9.studio/4.medias.md similarity index 100% rename from docs/content/docs/8.studio/4.medias.md rename to docs/content/docs/9.studio/4.medias.md diff --git a/docs/content/docs/8.studio/5.config.md b/docs/content/docs/9.studio/5.config.md similarity index 100% rename from docs/content/docs/8.studio/5.config.md rename to docs/content/docs/9.studio/5.config.md diff --git a/docs/content/docs/8.studio/6.debug.md b/docs/content/docs/9.studio/6.debug.md similarity index 100% rename from docs/content/docs/8.studio/6.debug.md rename to docs/content/docs/9.studio/6.debug.md From c6f1c8ecc7162d8039b40e2d780905cd596e89cb Mon Sep 17 00:00:00 2001 From: Farnabaz Date: Tue, 22 Jul 2025 12:50:30 +0200 Subject: [PATCH 2/2] up --- docs/content/docs/7.integrations/01.i18n.md | 82 ++++++++++++++------- 1 file changed, 54 insertions(+), 28 deletions(-) diff --git a/docs/content/docs/7.integrations/01.i18n.md b/docs/content/docs/7.integrations/01.i18n.md index 6bbf2c695..de9a3861e 100644 --- a/docs/content/docs/7.integrations/01.i18n.md +++ b/docs/content/docs/7.integrations/01.i18n.md @@ -1,20 +1,39 @@ --- title: I18n module +description: Learn how to create multi-language websites using Nuxt Content with the @nuxtjs/i18n module. --- -Nuxt Content works with the `@nuxtjs/i18n` module to create multi-language websites. +Nuxt Content integrates with [`@nuxtjs/i18n`](https://i18n.nuxtjs.org/) to create multi-language websites. When both modules are configured together, you can organize content by language and automatically serve the correct content based on the user's locale. -Setting up I18n with Nuxt Content takes three steps: +## Setup -1. **Prepare your documents**: Create separate collections for each language -2. **Configure I18n in Nuxt**: Set up the `i18n` module in `nuxt.config.ts` -3. **Fetch and render content**: Create pages that load content based on the current locale +::prose-steps +### Install the required module -## Step 1: Define Collections for Each Language +```bash [terminal] +npm install @nuxtjs/i18n +``` -Create separate collections for each language in your `content.config.ts`: +### Configure your `nuxt.config.ts` + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/content', '@nuxtjs/i18n'], + i18n: { + locales: [ + { code: 'en', name: 'English', language: 'en-US', dir: 'ltr' }, + { code: 'fr', name: 'French', language: 'fr-FR' }, + { code: 'fa', name: 'Farsi', language: 'fa-IR', dir: 'rtl' }, + ], + strategy: 'prefix_except_default', + defaultLocale: 'en', + } +}) +``` +### Define collections for each language +Create separate collections for each language in your `content.config.ts`: ```ts [content.config.ts] const commonSchema = ...; @@ -52,26 +71,7 @@ export default defineContentConfig({ }) ``` -## Step 2: Configure I18n Module - -Set up your languages and routing strategy in `nuxt.config.ts`: - -```ts [nuxt.config.ts] -export default defineNuxtConfig({ - // ... - i18n: { - locales: [ - { code: 'en', name: 'English', language: 'en-US', dir: 'ltr' }, - { code: 'fr', name: 'French', language: 'fr-FR' }, - { code: 'fa', name: 'Farsi', language: 'fa-IR', dir: 'rtl' }, - ], - strategy: 'prefix_except_default', - defaultLocale: 'en', - } -}) -``` - -## Step 3: Create Dynamic Pages +### Create dynamic pages Create a catch-all page that fetches content based on the current locale: @@ -108,11 +108,13 @@ const { data: page } = await useAsyncData('page-' + slug.value, async () => { ``` +:: +That's it! 🚀 Your multi-language content site is ready. ## Content Structure -Organize your content files in language-specific folders: +Organize your content files in language-specific folders to match your collections: ``` content/ @@ -131,6 +133,30 @@ content/ about.md ``` +Each language folder should contain the same structure to ensure content parity across locales. + +## Fallback Strategy + +You can implement a fallback strategy to show content from the default locale when content is missing in the current locale: + +```ts [pages/\[...slug\].vue] +const { data: page } = await useAsyncData('page-' + slug.value, async () => { + const collection = ('content_' + locale.value) as keyof Collections + let content = await queryCollection(collection).path(slug.value).first() + + // Fallback to default locale if content is missing + if (!content && locale.value !== 'en') { + content = await queryCollection('content_en').path(slug.value).first() + } + + return content +}) +``` + +::prose-warning +Make sure to handle missing content gracefully and provide clear feedback to users when content is not available in their preferred language. +:: + ## Complete Examples You can see a complete working example: