BlueBazze / nuxt-i18n-auto-config

nuxt-i18n-auto-config

I wanted to see if it was possible to seperate each language definition away from the nuxt.config file. It worked, while not being too pretty. But i managed to make language definitions simpler.
A language definition looks like

import { defineProjectLocale } from "nuxt-i18n-auto-config/runtime/composables";

export default defineProjectLocale({
  locale: { code: "en", iso: "en", name: "English" },
  datetimeFormats: {
    short: {
      year: "numeric",
      month: "short",
      day: "numeric",
    },
  },
  numberFormats: {
    currency: {
      style: "currency",
      currency: "USD",
    },
  },
});

Havent figured out how it can auto import the defineProjectLocale function.

Features

• Auto discovering locale files
• Datetime & Number format
• Singular layer for locale

Planned

• Namespaced files

Maybe

• Output locale messages to build dir(for namespaced files)
• Multiple layers merging

Config

export default defineNuxtConfig({
  modules: ["nuxt-i18n-auto-config", "@nuxtjs/i18n"],
  i18nAutoConfig: {
    paths: {

      /**
       * The path where your locale definitions are placed
       */
      localeDefinitionsPath: "config/locales",

      /**
       * The path where your locales are placed
       */
      localesPath: "locales",
    },

    /**
     * Expressions are used to match paths and files
     */
    expressions: {

      /**
       * {localeDefinitionsPath} replaced with i18nAutoconfig.paths.localeDefinitionsPath
       * Default is "./config/locales/"
       * Example "./config/locales/en.ts"
       */
      localeDefinition: "{localeDefinitionsPath}/",

      /**
       * {localePath} is replaced with the variable in i18nAutoconfig.paths.localesPath
       * {locale} is replaced with the code for that specific locale be it "en" or "en-UK"
       * Default is "./locales/{locale}/"
       * Example "./locales/en/" - contains *.json files
       */
      locales: "{localesPath}/{locale}/",
    },
  },
});

Quick Setup

0. Install @nuxtjs/i18n

1. Add nuxt-i18n-auto-config dependency to your project

# Using npm
npm install --save-dev nuxt-i18n-auto-config

...

2. Add nuxt-i18n-auto-config to the modules section of nuxt.config.ts, before @nuxtjs/i18n. Reason mentioned here

export default defineNuxtConfig({
  modules: ["nuxt-i18n-auto-config", "@nuxtjs/i18n"],
});

That's it! You can now use nuxt-i18n-auto-config in your Nuxt app ✨

Development

# Install dependencies
bun install

# Generate type stubs
bun run dev:prepare

# Develop with the playground
bun run dev

# Build the playground
bun run dev:build

# Run ESLint
bun run lint

# Run Vitest
bun run test
bun run test:watch

# Release new version
bun run release