i18n

A guide to set up internationalization (i18n) for your shadcn-nuxt-docs

Configuring internationalization

This guide will walk you through the process of configuring @nuxtjs/i18n in your shadcn-nuxt-docs project.

Add i18n Configuration

First, you need to add the i18n configuration to your Nuxt.js project. Open your nuxt.config.ts file and add the following configuration:

nuxt.config.ts
export default defineNuxtConfig({
  // Other nuxt configurations ...
  i18n: {
    baseUrl: 'https://shadcn-docs-nuxt.vercel.app/',
    detectBrowserLanguage: false,
    strategy: 'prefix_except_default',
    defaultLocale: 'en',
    locales: [
      {
        code: 'en',
        name: 'English',
        language: 'en-US',
      },
      {
        code: 'xx', // language 2 letters code (e.g. 'fr')
        name: 'Xxxxx', // language name (e.g. 'Français')
        language: 'xx-XX', // language ISO code (e.g. 'fr-FR')
      },
    ],
  },
});

Organize Your Content Files

To support multiple languages, you need to organize your content files in a specific directory structure. Follow this file tree structure:

  • The content directory contains your default language content files.
  • The xx directory inside content contains the translations of your content files,xx being the language code (e.g., fr/index.md for French).

Create i18n/i18n.config.ts

Next, create a new file named i18n/i18n.config.ts. This file will contain the configuration for your i18n messages to translate. Add the following code to the file:

i18n/i18n.config.ts
import { defineI18nConfig } from '@nuxtjs/i18n';

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      // Add here all english strings defined in app.config.ts e.g. titles in header.nav or toc.title
      // Default UI strings are already translated out of the box

      shiki: 'shiki', // for example: site title
    },
    xx: {
      // Add here all translation

      shiki: '式', // for example: site title
    },
  },
}));

Conclusion

By following these steps, you have successfully configured @nuxtjs/i18n in your shadcn-nuxt-docs project. Your documentation site now supports multiple languages, and you can easily add more translations by following the same structure.

Edit this page
Banner
Show a banner on the top of the page.
Carbon Ads
Run ads at the bottom of the TOC section.