### Installation and Usage Example

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/packages/types/README.md

Demonstrates how to install the package and provides a TypeScript example of using the exported types.

```APIDOC
## Installation

Install the package using npm or yarn:

```bash
npm install @i18n-micro/types
```

```bash
yarn add @i18n-micro/types
```

## Usage Example

This example illustrates how to import and utilize the types provided by `@i18n-micro/types` in your Nuxt.js application.

```typescript
import { Locale, Strategies, ModuleOptions, I18nRouteParams } from '@i18n-micro/types'

// Define locales
const locales: Locale[] = [
  {
    code: 'en',
    iso: 'en-US',
    dir: 'ltr',
    displayName: 'English',
    baseUrl: 'https://example.com/en',
  },
  {
    code: 'de',
    iso: 'de-DE',
    dir: 'ltr',
    displayName: 'German',
    baseUrl: 'https://example.com/de',
  },
]

// Define routing strategy
const strategy: Strategies = 'prefix_except_default'

// Define module options
const options: ModuleOptions = {
  locales,
  strategy: 'prefix', // Note: This might override the 'strategy' variable above depending on context
  defaultLocale: 'en',
}

// Define route parameters
const routeParams: I18nRouteParams = {
  en: { page: 'home' },
  de: { page: 'startseite' },
}
```
```

--------------------------------

### Setup With Router Adapter

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/solid-package.md

This example shows how to integrate `@i18n-micro/solid` with a SolidJS application that uses `@solidjs/router`. It includes setting up the router adapter for locale-aware routing.

```APIDOC
## Setup With Router Adapter

For applications with routing (using @solidjs/router):

```typescript
import { render } from 'solid-js/web'
import { Router, Route, useNavigate, useLocation } from '@solidjs/router'
import { createI18n, I18nProvider, createSolidRouterAdapter } from '@i18n-micro/solid'
import type { Component } from 'solid-js'
import type { Locale } from '@i18n-micro/types'

const locales: Locale[] = [
  { code: 'en', displayName: 'English' },
  { code: 'fr', displayName: 'Français' },
]
const defaultLocale = 'en'

const i18n = createI18n({
  locale: defaultLocale,
  fallbackLocale: defaultLocale,
  messages: { [defaultLocale]: {} },
})

// Router root component with adapter setup
const RouterRoot: Component<{ children?: unknown }> = (props) => {
  const navigate = useNavigate()
  const location = useLocation()
  const routingStrategy = createSolidRouterAdapter(
    locales,
    defaultLocale,
    navigate,
    location,
  )

  return (
    <I18nProvider
      i18n={i18n}
      locales={locales}
      defaultLocale={defaultLocale}
      routingStrategy={routingStrategy}
    >
      {props.children as unknown}
    </I18nProvider>
  )
}

const root = document.getElementById('root')!
render(() => (
  <Router root={RouterRoot}>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
  </Router>
), root)
```
```

--------------------------------

### Basic Setup Without Router

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/solid-package.md

This example demonstrates how to set up `@i18n-micro/solid` in a SolidJS application that does not use a router. It covers initializing i18n, defining locales, and rendering translated content.

```APIDOC
## Basic Setup Without Router

For applications that don't need routing features:

```typescript
import { render } from 'solid-js/web'
import { createI18n, I18nProvider, useI18n } from '@i18n-micro/solid'
import type { Component } from 'solid-js'
import type { Locale } from '@i18n-micro/types'

const locales: Locale[] = [
  { code: 'en', displayName: 'English', iso: 'en-US' },
  { code: 'fr', displayName: 'Français', iso: 'fr-FR' },
]

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: { welcome: 'Welcome' },
    fr: { welcome: 'Bienvenue' },
  },
})

const App: Component = () => {
  const { t } = useI18n()
  return <div>{t('welcome')}</div>
}

render(() => (
  <I18nProvider
    i18n={i18n}
    locales={locales}
    defaultLocale="en"
  >
    <App />
  </I18nProvider>
), document.getElementById('root'))
```
```

--------------------------------

### Setup With Router Adapter

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/vue-package.md

Example of setting up i18n with Vue Router using the createVueRouterAdapter.

```APIDOC
## Setup With Router Adapter

For applications with routing:

```typescript
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createI18n } from '@i18n-micro/vue'
import { createVueRouterAdapter } from '@i18n-micro/vue'
import App from './App.vue'
import { routes, localesConfig, defaultLocale } from './app-config'

const router = createRouter({
  history: createWebHistory(),
  routes,
})

// Create router adapter
const routingStrategy = createVueRouterAdapter(router, localesConfig, defaultLocale)

// Create i18n with routing strategy
const i18n = createI18n({
  locale: defaultLocale,
  fallbackLocale: defaultLocale,
  messages: { [defaultLocale]: {} },
  routingStrategy, // Pass adapter here
  // Automatically provided to the app - no need for manual provide calls
  locales: localesConfig,
  defaultLocale,
})

const app = createApp(App)
app.use(router)
app.use(i18n)

app.mount('#app')
```
```

--------------------------------

### Custom Bridge Implementation Example

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/devtools-ui-package.md

Provides a practical example of how to implement a custom bridge adapter. It demonstrates creating a `CustomI18n` class and then instantiating the `createBridge` function with this custom adapter, showing a complete setup for a custom i18n solution.

```APIDOC
## Custom Bridge Implementation

```typescript
import { createBridge } from '@i18n-micro/devtools-ui'
import type { BridgeAdapter } from '@i18n-micro/devtools-ui'

class CustomI18n {
  private cache = {
    root: {},
    route: {},
  }

  addTranslations(locale: string, content: Record<string, unknown>) {
    this.cache.root[locale] = content
  }

  subscribe(callback: () => void) {
    // Your subscription logic
    return () => {} // unsubscribe
  }
}

const customI18n = new CustomI18n()

const adapter: BridgeAdapter = {
  getRouteCache: () => customI18n.cache.route,
  addTranslations: (locale, content) => {
    customI18n.addTranslations(locale, content)
  },
  addRouteTranslations: () => {}, // Not implemented
  subscribe: (callback) => customI18n.subscribe(callback),
}

const bridge = createBridge({
  adapter,
  locales: [{ code: 'en', displayName: 'English' }],
  defaultLocale: 'en',
})
```
```

--------------------------------

### Install @i18n-micro/preact with bun

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/preact-package.md

Install the package using bun.

```bash
bun add @i18n-micro/preact
```

--------------------------------

### Install @i18n-micro/react with bun

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/react-package.md

Install the package using bun. Ensure you have bun installed.

```bash
bun add @i18n-micro/react
```

--------------------------------

### Install @i18n-micro/solid with bun

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/solid-package.md

Install the package using bun. Ensure you have SolidJS installed as a peer dependency.

```bash
bun add @i18n-micro/solid
```

--------------------------------

### Install @i18n-micro/astro with bun

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/astro-package.md

Install the package using bun.

```bash
bun add @i18n-micro/astro
```

--------------------------------

### Install @i18n-micro/preact

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/packages/preact/README.md

Install the library using your preferred package manager.

```bash
pnpm add @i18n-micro/preact
# or
npm install @i18n-micro/preact
# or
yarn add @i18n-micro/preact
```

--------------------------------

### Install @i18n-micro/solid with npm

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/solid-package.md

Install the package using npm. Ensure you have SolidJS installed as a peer dependency.

```bash
npm install @i18n-micro/solid
```

--------------------------------

### Install @i18n-micro/solid

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/packages/solid/README.md

Install the SolidJS plugin using your preferred package manager.

```bash
pnpm add @i18n-micro/solid
# or
npm install @i18n-micro/solid
# or
yarn add @i18n-micro/solid
```

--------------------------------

### Install @i18n-micro/vue with bun

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/vue-package.md

Install the package using bun.

```bash
bun add @i18n-micro/vue
```

--------------------------------

### Install @i18n-micro/react with npm

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/react-package.md

Install the package using npm. Ensure you have Node.js and npm installed.

```bash
npm install @i18n-micro/react
```

--------------------------------

### Install @i18n-micro/solid with pnpm

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/solid-package.md

Install the package using pnpm. Ensure you have SolidJS installed as a peer dependency.

```bash
pnpm add @i18n-micro/solid
```

--------------------------------

### Install @i18n-micro/preact with yarn

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/preact-package.md

Install the package using yarn.

```bash
yarn add @i18n-micro/preact
```

--------------------------------

### Setup with Wouter Router Adapter

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/preact-package.md

Configure the i18n-micro package with a custom router adapter for Wouter. This example sets up locales, a default locale, and defines a `RouterRoot` component to create the adapter using Wouter's hooks.

```typescript
import { render, h } from 'preact'
import { Router } from 'wouter-preact'
import { useLocation } from 'wouter-preact'
import { createI18n, I18nProvider, createPreactRouterAdapter } from '@i18n-micro/preact'
import App from './App'
import type { Locale } from '@i18n-micro/types'

const localesConfig: Locale[] = [
  { code: 'en', displayName: 'English', iso: 'en-US' },
  { code: 'fr', displayName: 'Français', iso: 'fr-FR' },
  { code: 'de', displayName: 'Deutsch', iso: 'de-DE' },
]

const defaultLocale = 'en'

const i18n = createI18n({
  locale: defaultLocale,
  fallbackLocale: defaultLocale,
  messages: {
    en: {},
  },
})

// RouterRoot component that creates the adapter
function RouterRoot({ children }: { children?: any }) {
  const [location, navigate] = useLocation()
  
  // Create adapter using wouter hooks
  const routingStrategy = createWouterAdapter(localesConfig, defaultLocale, location, navigate)

  return h(I18nProvider, {
    i18n,
    locales: localesConfig,
    defaultLocale,
    routingStrategy,
  }, children)
}

// Helper function to create wouter adapter
function createWouterAdapter(
  locales: Locale[],
  defaultLocale: string,
  locationPath: string,
  navigate: (to: string, options?: { replace?: boolean }) => void,
) {
  const localeCodes = locales.map(loc => loc.code)
  
  const resolvePath = (to: string | { path?: string }, locale: string): string | { path?: string } => {
    const path = typeof to === 'string' ? to : (to.path || '/')
    const pathSegments = path.split('/').filter(Boolean)
    if (pathSegments.length > 0 && localeCodes.includes(pathSegments[0])) {
      pathSegments.shift()
    }
    const cleanPath = '/' + pathSegments.join('/')
    return locale === defaultLocale ? cleanPath : `/${locale}${cleanPath === '/' ? '' : cleanPath}`
  }

  return {
    getCurrentPath: () => locationPath,
    push: (target) => navigate(target.path),
    replace: (target) => navigate(target.path, { replace: true }),
    resolvePath: (to, locale) => resolvePath(to, locale),
    getRoute: () => ({
      fullPath: locationPath,
      query: Object.fromEntries(new URLSearchParams(window.location.search)),
    }),
  }
}

const root = document.getElementById('app')!
render(
  h(Router, null, h(RouterRoot, null, h(App))),
  root
)
```

--------------------------------

### I18nProvider Setup without Router

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/preact-package.md

Example of setting up the `I18nProvider` for a Preact application without a specific router adapter. Requires manual creation of the i18n instance.

```tsx
import { h } from 'preact'
import { createI18n, I18nProvider } from '@i18n-micro/preact'

const i18n = createI18n({
  locale: 'en',
  messages: { /* ... */ },
})

function App() {
  return h(I18nProvider, {
    i18n,
    locales: localesConfig,
    defaultLocale: 'en',
  }, h(YourApp))
}
```

--------------------------------

### Install @i18n-micro/react

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/packages/react/README.md

Install the package using your preferred package manager.

```bash
pnpm add @i18n-micro/react
# or
npm install @i18n-micro/react
# or
yarn add @i18n-micro/react
```

--------------------------------

### Install @i18n-micro/preact with pnpm

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/preact-package.md

Install the package using pnpm.

```bash
pnpm add @i18n-micro/preact
```

--------------------------------

### Install @i18n-micro/react with yarn

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/react-package.md

Install the package using yarn. Ensure you have Node.js and yarn installed.

```bash
yarn add @i18n-micro/react
```

--------------------------------

### Install @i18n-micro/preact with npm

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/preact-package.md

Install the package using npm.

```bash
npm install @i18n-micro/preact
```

--------------------------------

### Install @i18n-micro/solid with yarn

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/solid-package.md

Install the package using yarn. Ensure you have SolidJS installed as a peer dependency.

```bash
yarn add @i18n-micro/solid
```

--------------------------------

### Install @i18n-micro/react with pnpm

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/react-package.md

Install the package using pnpm. Ensure you have Node.js and pnpm installed.

```bash
pnpm add @i18n-micro/react
```

--------------------------------

### Install @i18n-micro/astro with pnpm

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/astro-package.md

Install the package using pnpm.

```bash
pnpm add @i18n-micro/astro
```

--------------------------------

### Install @i18n-micro/astro with npm

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/astro-package.md

Install the package using npm.

```bash
npm install @i18n-micro/astro
```

--------------------------------

### Install @i18n-micro/astro with yarn

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/astro-package.md

Install the package using yarn.

```bash
yarn add @i18n-micro/astro
```

--------------------------------

### Install @i18n-micro/node

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/packages/node/README.md

Install the package using your preferred package manager.

```bash
pnpm add @i18n-micro/node
# or
npm install @i18n-micro/node
# or
yarn add @i18n-micro/node
```

--------------------------------

### Installation

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/nodejs-package.md

Install the @i18n-micro/node package using your preferred package manager.

```APIDOC
## Installation

```bash
pnpm add @i18n-micro/node
# or
npm install @i18n-micro/node
# or
yarn add @i18n-micro/node
```
```

--------------------------------

### Install @i18n-micro/vue with pnpm

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/vue-package.md

Install the package using pnpm.

```bash
pnpm add @i18n-micro/vue
```

--------------------------------

### Install @i18n-micro/vue with yarn

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/vue-package.md

Install the package using yarn.

```bash
yarn add @i18n-micro/vue
```

--------------------------------

### Install @i18n-micro/vue

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/packages/vue/README.md

Install the package using your preferred package manager.

```bash
pnpm add @i18n-micro/vue
# or
npm install @i18n-micro/vue
# or
yarn add @i18n-micro/vue
```

--------------------------------

### Custom Router Adapter Example

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/vue-package.md

An example of creating a custom router adapter for any router library.

```APIDOC
## Custom Router Adapter

You can create adapters for any router library. Here's an example for a custom router:

```typescript
import type { I18nRoutingStrategy } from '@i18n-micro/vue'

function createCustomRouterAdapter(customRouter: CustomRouter): I18nRoutingStrategy {
  return {
    getCurrentPath: () => customRouter.getCurrentPath(),
    push: (target) => customRouter.navigate(target.path),
    replace: (target) => customRouter.replace(target.path),
    resolvePath: (to, locale) => {
      const path = typeof to === 'string' ? to : (to.path || '/')
      return locale === 'en' ? path : `/${locale}${path}`
    },
  }
}
```
```

--------------------------------

### Install @i18n-micro/astro

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/packages/astro/README.md

Install the Astro integration using your preferred package manager.

```bash
pnpm add @i18n-micro/astro
# or
npm install @i18n-micro/astro
# or
yarn add @i18n-micro/astro
```

--------------------------------

### Install types-generator with bun

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/types-generator.md

Install the package as a dev dependency using bun.

```bash
bun add -D @i18n-micro/types-generator
```

--------------------------------

### Get Current Locale

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/composables/useI18n.md

Retrieves the current locale of the application. Ensure `useI18n` is called within a component or setup function.

```javascript
const { $getLocale } = useI18n()
const locale = $getLocale()
```

--------------------------------

### Build and Serve Documentation Locally

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/guide/contribution.md

Build the documentation site and serve it locally for preview. This allows you to view changes before deploying.

```bash
pnpm run docs:build
```

```bash
pnpm run docs:serve
```

--------------------------------

### Basic Setup for @i18n-micro/solid (Without Router)

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/solid-package.md

Demonstrates basic internationalization setup in a SolidJS application without using a router. Includes creating an i18n instance with messages and providing it to the application context.

```typescript
import { render } from 'solid-js/web'
import { createI18n, I18nProvider, useI18n } from '@i18n-micro/solid'
import type { Component } from 'solid-js'

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: {
      greeting: 'Hello, {name}!',
      apples: 'no apples | one apple | {count} apples',
    },
    fr: {
      greeting: 'Bonjour, {name}!',
      apples: 'pas de pommes | une pomme | {count} pommes',
    },
  },
})

const App: Component = () => {
  const { t, tc } = useI18n()

  return (
    <div>
      <p>{t('greeting', { name: 'World' })}</p>
      <p>{tc('apples', 5)}</p>
    </div>
  )
}

const root = document.getElementById('root')!
if (root) {
  render(() => (
    <I18nProvider
      i18n={i18n}
      locales={[
        { code: 'en', displayName: 'English', iso: 'en-US' },
        { code: 'fr', displayName: 'Français', iso: 'fr-FR' },
      ]}
      defaultLocale="en"
    >
      <App />
    </I18nProvider>
  ), root)
}
```

--------------------------------

### I18nProvider Setup with Router Adapter

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/preact-package.md

Example of configuring `I18nProvider` with a router adapter, specifically `createPreactRouterAdapter`, for routing features. Requires `wouter-preact`.

```tsx
import { h } from 'preact'
import { useLocation } from 'wouter-preact'
import { createI18n, I18nProvider, createPreactRouterAdapter } from '@i18n-micro/preact'

function RouterRoot({ children }: { children?: any }) {
  const [location] = useLocation()
  const routingStrategy = createPreactRouterAdapter(localesConfig, defaultLocale)

  return h(I18nProvider, {
    i18n,
    locales: localesConfig,
    defaultLocale,
    routingStrategy,
  }, children)
}
```

--------------------------------

### Start Development Server with npm, pnpm, yarn, or bun

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/packages/test-utils/example/README.md

Run these commands to start the local development server. The server typically runs on http://localhost:3000.

```bash
# npm
npm run dev
```

```bash
# pnpm
pnpm dev
```

```bash
# yarn
yarn dev
```

```bash
# bun
bun run dev
```

--------------------------------

### Get Current Locale Code

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/api/methods.md

Retrieves the current active locale code. Assumes the locale is set to English for the example output.

```typescript
const locale = $getLocale()
// Output: 'en' (assuming the current locale is English)
```

--------------------------------

### Install Dependencies and Build Packages

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/guide/contribution.md

Install project dependencies using pnpm, build the packages, and prepare the playground environment.

```bash
pnpm install
pnpm --filter "./packages/**" run build
pnpm run prepack && cd playground && pnpm run prepare && cd ..
```

--------------------------------

### Middleware Setup with Translation Loading

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/astro-package.md

Configure the middleware in src/middleware.ts to load translations explicitly. This example demonstrates translation loading for Node.js runtime.

```typescript
import { createI18nMiddleware, createI18n, createAstroRouterAdapter, loadTranslationsIntoI18n } from '@i18n-micro/astro'
import { config } from 'virtual:i18n-micro/config'

// Use config from virtual module to avoid duplication
const globalI18n = createI18n({
  locale: config.defaultLocale,
  fallbackLocale: config.fallbackLocale,
  messages: {}, // Translations will be loaded explicitly below
})

// ⚠️ IMPORTANT: loadTranslationsIntoI18n only works in Node.js runtime
// For Edge runtime, use import.meta.glob (see Setup Middleware section)
if (config.translationDir) {
  loadTranslationsIntoI18n(globalI18n, {
    translationDir: config.translationDir,
    rootDir: process.cwd(), // Or use explicit path: resolve(dirname(fileURLToPath(import.meta.url)), '../..')
  })
}

const routingStrategy = createAstroRouterAdapter(config.locales, config.defaultLocale)

export const onRequest = createI18nMiddleware({
  i18n: globalI18n,
  defaultLocale: config.defaultLocale,
  locales: config.localeCodes,
  localeObjects: config.locales,
  routingStrategy,
})
```

--------------------------------

### Basic Setup Without Router

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/preact-package.md

Demonstrates how to set up i18n-micro for Preact applications that do not require routing features.

```APIDOC
## Basic Setup Without Router

For applications that don't need routing features:

```typescript
import { render, h } from 'preact'
import { createI18n, I18nProvider } from '@i18n-micro/preact'
import App from './App'
import type { Locale } from '@i18n-micro/types'

const localesConfig: Locale[] = [
  { code: 'en', displayName: 'English', iso: 'en-US' },
  { code: 'fr', displayName: 'Français', iso: 'fr-FR' },
]

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: { welcome: 'Welcome' },
    fr: { welcome: 'Bienvenue' },
  },
})

const root = document.getElementById('app')!
render(
  h(I18nProvider, {
    i18n,
    locales: localesConfig,
    defaultLocale: 'en',
  }, h(App)),
  root
)
```
```

--------------------------------

### Complete nuxt.config.ts Example for Firebase AppHosting

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/guide/firebase.md

A comprehensive nuxt.config.ts configuration for Firebase AppHosting, including nuxt-i18n-micro setup, route rules, and Nitro presets.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-i18n-micro'],
  
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US', dir: 'ltr' },
      { code: 'fr', iso: 'fr-FR', dir: 'ltr' },
      { code: 'de', iso: 'de-DE', dir: 'ltr' },
      { code: 'es', iso: 'es-ES', dir: 'ltr' },
      { code: 'it', iso: 'it-IT', dir: 'ltr' },
      { code: 'pt', iso: 'pt-PT', dir: 'ltr' },
      { code: 'ru', iso: 'ru-RU', dir: 'ltr' },
      { code: 'zh', iso: 'zh-CN', dir: 'ltr' },
      { code: 'ko', iso: 'ko-KR', dir: 'ltr' }
    ],
    strategy: 'prefix_except_default',
    defaultLocale: 'en',
    translationDir: 'locales',
    meta: true,
    metaBaseUrl: 'https://your-domain.com',
    debug: false, // Enable in development if needed
  },
  
  routeRules: {
    '/_locales/**': {
      headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'public, max-age=3600, s-maxage=3600'
      }
    }
  },
  
  nitro: {
    preset: 'firebase-app-hosting',
    prerender: {
      crawlLinks: true,
      routes: ['/']
    }
  }
})
```

--------------------------------

### Initialize Benchmark Environment

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/packages/path-strategy/bench/index.html

Sets up the environment for the benchmark by displaying user agent and current date. It also initializes the benchmark run by disabling buttons, showing progress, and clearing previous results.

```javascript
import { runBenchmarks } from './main.ts'
const envEl = document.getElementById('env')
envEl.textContent = `${navigator.userAgent.split(') ')[0]}) | ${new Date().toLocaleString()}`
window.start = () => {
  const btn = document.getElementById('runBtn')
  const prog = document.getElementById('progress')
  const fill = document.getElementById('progressFill')
  const statusEl = document.getElementById('status')
  const resultsEl = document.getElementById('results')
  const summaryEl = document.getElementById('summary')
  btn.disabled = true
  prog.style.display = 'block'
  resultsEl.innerHTML = ''
  summaryEl.style.display = 'none'
  requestAnimationFrame(() => {
    setTimeout(() => {
      const { results, baseline } = runBenchmarks((p) => {
        const pct = ((p.current / p.total) * 100).toFixed(0)
        fill.style.width = `${pct}%`
        statusEl.textContent = `[${p.current + 1}/${p.total}] ${p.name}`
      })
      fill.style.width = '100%'
      statusEl.textContent = 'Done!'
      renderResults(results, baseline)
      window.__BENCH_RESULTS__ = results
      window.__BENCH_DONE__ = true
      btn.disabled = false
    }, 50)
  })
}
```

--------------------------------

### Get i18n Instance from Astro Context

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/astro-package.md

Retrieves the i18n instance from the Astro global context. Ensure the i18n plugin is configured in your Astro setup.

```typescript
import { getI18n } from '@i18n-micro/astro'

const i18n = getI18n(Astro)
```

--------------------------------

### Basic Setup Without Router

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/solid-package.md

Use this for SolidJS applications that do not require routing features. It demonstrates the core setup of i18n-micro.

```typescript
import { render } from 'solid-js/web'
import { createI18n, I18nProvider, useI18n } from '@i18n-micro/solid'
import type { Component } from 'solid-js'
import type { Locale } from '@i18n-micro/types'

const locales: Locale[] = [
  { code: 'en', displayName: 'English', iso: 'en-US' },
  { code: 'fr', displayName: 'Français', iso: 'fr-FR' },
]

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: { welcome: 'Welcome' },
    fr: { welcome: 'Bienvenue' },
  },
})

const App: Component = () => {
  const { t } = useI18n()
  return <div>{t('welcome')}</div>
}

render(() => (
  <I18nProvider
    i18n={i18n}
    locales={locales}
    defaultLocale="en"
  >
    <App />
  </I18nProvider>
), document.getElementById('root'))
```

--------------------------------

### Example: Wouter Adapter Implementation

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/preact-package.md

Provides a concrete example of creating a router adapter for `wouter-preact`, including the implementation of the `I18nRoutingStrategy` interface and its usage within an application.

```APIDOC
### Example 1: Wouter Adapter

This example shows how to create an adapter for `wouter-preact`:

```typescript
// src/router-adapter.tsx
import { Link } from 'wouter-preact'
import type { I18nRoutingStrategy } from '@i18n-micro/preact'
import type { Locale } from '@i18n-micro/types'
import type React from 'react'

export function createWouterAdapter(
  locales: Locale[],
  defaultLocale: string,
  locationPath: string, // from useLocation()[0]
  navigate: (to: string, options?: { replace?: boolean }) => void, // from useLocation()[1]
): I18nRoutingStrategy {
  const localeCodes = locales.map(loc => loc.code)

  const resolvePath = (to: string | { path?: string }, locale: string): string | { path?: string } => {
    const path = typeof to === 'string' ? to : (to.path || '/')
    const pathSegments = path.split('/').filter(Boolean)
    if (pathSegments.length > 0 && localeCodes.includes(pathSegments[0])) {
      pathSegments.shift()
    }
    const cleanPath = '/' + pathSegments.join('/')
    return locale === defaultLocale ? cleanPath : `/${locale}${cleanPath === '/' ? '' : cleanPath}`
  }

  return {
    // Pass Wouter's Link component
    linkComponent: Link as unknown as React.ComponentType<{ 
      href: string
      children?: React.ReactNode
      style?: React.CSSProperties
      className?: string
      [key: string]: unknown
    }>,

    getCurrentPath: () => locationPath,

    push: target => navigate(target.path),

    replace: target => navigate(target.path, { replace: true }),

    resolvePath: (to, locale) => resolvePath(to, locale),

    getRoute: () => ({
      fullPath: locationPath,
      query: Object.fromEntries(new URLSearchParams(window.location.search)),
    }),
  }
}
```

**Usage:**

```typescript
// In your App component
import { Router, useLocation } from 'wouter-preact'
import { createI18n, I18nProvider } from '@i18n-micro/preact'
import { createWouterAdapter } from './router-adapter'

function RouterRoot({ children }: { children?: any }) {
  const [location, navigate] = useLocation()
  const routingStrategy = createWouterAdapter(localesConfig, defaultLocale, location, navigate)

  return h(I18nProvider, {
    i18n,
    locales: localesConfig,
    defaultLocale,
    routingStrategy,
  }, children)
}

function App() {
  return h(Router, null, h(RouterRoot, null, h(YourRoutes)))
}
```
```

--------------------------------

### Example Vue Component Using useI18n

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/guide/testing.md

A simple Vue component demonstrating the use of the `useI18n` composable in both the script setup and template for translations. It accepts a `message` prop and uses `$t` for translations.

```vue
<script setup lang="ts">
const { $t } = useI18n()

const props = defineProps({
  message: {
    type: String,
    default: null,
  },
})

// Test to see that $t works in script setup as well as the template
const message = props.message || $t('defaultMessage')
</script>

<template>
  <div>
    <p>Test from component: {{ $t('welcome') }}</p>
    <p data-testid="message">
      Test message from props: {{ message }}
    </p>
  </div>
</template>

```

--------------------------------

### Install @i18n-micro/devtools-ui

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/packages/devtools-ui/README.md

Use this command to add the package to your project. Choose the command that matches your package manager.

```bash
pnpm add @i18n-micro/devtools-ui
```

```bash
npm install @i18n-micro/devtools-ui
```

```bash
yarn add @i18n-micro/devtools-ui
```

--------------------------------

### Route-Specific Translations Setup

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/solid-package.md

This TypeScript example demonstrates how to add and use route-specific translations with the i18n instance. It involves adding translations for a given locale and route, setting the current route, and then retrieving translations.

```typescript
// Add route-specific translations
i18n.addRouteTranslations('en', 'home', {
  title: 'Home Page',
  description: 'Welcome to our home page',
})

i18n.addRouteTranslations('en', 'about', {
  title: 'About Us',
  description: 'Learn more about us',
})

// Set current route
i18n.setRoute('home')

// Use route-specific translation
i18n.t('title') // "Home Page"
i18n.t('title', {}, null, 'about') // "About Us"
```

--------------------------------

### React Router Setup with LocaleHandler

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/react-package.md

Sets up routes for a React application using `react-router-dom`, including a `Layout` component and a `LocaleHandler` to manage localized routes. This example defines default locale routes and localized routes based on a `:locale` parameter.

```tsx
import { BrowserRouter as RouterRoot } from 'react-router-dom'
import { Routes, Route } from 'react-router-dom'
import { LocaleHandler } from '@i18n-micro/react'

function Layout() {
  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <Navigation />
      <div style={{ padding: '20px', backgroundColor: '#f9f9f9', borderRadius: '8px' }}>
        <Outlet />
      </div>
    </div>
  )
}

function AppRoutes() {
  return (
    <Routes>
      <Route element={<Layout />}>
        {/* Default locale routes (en) */}
        <Route element={<LocaleHandler />}>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/components" element={<Components />} />
        </Route>

        {/* Localized routes */}
        <Route path="/:locale" element={<LocaleHandler />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="components" element={<Components />} />
        </Route>
      </Route>
    </Routes>
  )
}

export default function App() {
  return (
    <RouterRoot>
      <AppRoutes />
    </RouterRoot>
  )
}
```

--------------------------------

### Bash Script for Build Preparation

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/guide/firebase.md

Commands to install dependencies, build the project for production, and verify the presence of prerendered translation files.

```bash
# Install dependencies
pnpm install

# Build for production
pnpm build

# Verify translations are prerendered
ls -la .output/public/_locales/
```

--------------------------------

### Core Utilities Usage Example

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/packages/core/README.md

Demonstrates initializing the translation helper, loading translations (global and page-specific), retrieving translations, interpolating placeholders, and using the FormatService and RouteService. Ensure necessary configurations and router instances are available for RouteService.

```typescript
import { useTranslationHelper, interpolate, FormatService, RouteService } from '@i18n-micro/core'

// Initialize the translation helper
const translationHelper = useTranslationHelper()

// Load translations for a specific locale
translationHelper.loadTranslations('en', {
  greeting: 'Hello, {name}!',
  nested: {
    message: 'This is a nested message.',
  },
})

// Load page-specific translations for a specific locale
translationHelper.loadPageTranslations('en', 'home', {
  welcome: 'Welcome to the home page!',
})

// Retrieve a translation for a specific locale
const greeting = translationHelper.getTranslation<string>('en', 'index', 'greeting')
console.log(greeting) // 'Hello, {name}!'

// Interpolate placeholders
const interpolatedGreeting = interpolate(greeting!, { name: 'John' })
console.log(interpolatedGreeting) // 'Hello, John!'

// Format numbers, dates, and relative times
const formatService = new FormatService()
const formattedNumber = formatService.formatNumber(123456.789, 'en-US')
const formattedDate = formatService.formatDate(new Date(), 'en-US')
const formattedRelativeTime = formatService.formatRelativeTime(new Date(), 'en-US')

console.log(formattedNumber) // '123,456.789'
console.log(formattedDate) // '10/5/2023'
console.log(formattedRelativeTime) // 'just now'

// Handle locale-specific routing
const routeService = new RouteService(
  i18nConfig,
  router,
  hashLocaleDefault,
  noPrefixDefault,
  navigateTo,
  setCookie
)

const localizedRoute = routeService.getLocalizedRoute('/about', currentRoute, 'en')
console.log(localizedRoute) // Localized route object
```

--------------------------------

### Framework Integration (Vite Plugins)

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/devtools-ui-package.md

Provides examples of how to integrate the i18n devtools UI plugin into various JavaScript frameworks using Vite. This includes setup for Vue, React, Solid, and Astro, typically involving adding the plugin to the Vite configuration and specifying the translation directory.

```APIDOC
## Framework Integration

### Vue

```typescript
import { i18nDevToolsPlugin } from '@i18n-micro/devtools-ui/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    i18nDevToolsPlugin({
      translationDir: 'src/locales',
    }),
  ],
})
```

### React

```typescript
import { i18nDevToolsPlugin } from '@i18n-micro/devtools-ui/vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    react(),
    i18nDevToolsPlugin({
      translationDir: 'src/locales',
    }),
  ],
})
```

### Solid

```typescript
import { i18nDevToolsPlugin } from '@i18n-micro/devtools-ui/vite'
import solidPlugin from 'vite-plugin-solid'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    solidPlugin(),
    i18nDevToolsPlugin({
      translationDir: 'src/locales',
    }),
  ],
})
```

### Astro

```javascript
import { i18nDevToolsPlugin } from '@i18n-micro/devtools-ui/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  vite: {
    plugins: [
      i18nDevToolsPlugin({
        translationDir: 'src/locales',
      }),
    ],
  },
})
```
```

--------------------------------

### Setup With Router Adapter

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/solid-package.md

Integrates i18n-micro with @solidjs/router for applications that need routing. It sets up a router adapter for navigation.

```typescript
import { render } from 'solid-js/web'
import { Router, Route, useNavigate, useLocation } from '@solidjs/router'
import { createI18n, I18nProvider, createSolidRouterAdapter } from '@i18n-micro/solid'
import type { Component } from 'solid-js'
import type { Locale } from '@i18n-micro/types'

const locales: Locale[] = [
  { code: 'en', displayName: 'English' },
  { code: 'fr', displayName: 'Français' },
]
const defaultLocale = 'en'

const i18n = createI18n({
  locale: defaultLocale,
  fallbackLocale: defaultLocale,
  messages: { [defaultLocale]: {} },
})

// Router root component with adapter setup
const RouterRoot: Component<{ children?: unknown }> = (props) => {
  const navigate = useNavigate()
  const location = useLocation()
  const routingStrategy = createSolidRouterAdapter(
    locales,
    defaultLocale,
    navigate,
    location,
  )

  return (
    <I18nProvider
      i18n={i18n}
      locales={locales}
      defaultLocale={defaultLocale}
      routingStrategy={routingStrategy}
    >
      {props.children as unknown}
    </I18nProvider>
  )
}

const root = document.getElementById('root')!
render(() => (
  <Router root={RouterRoot}>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
  </Router>
), root)
```

--------------------------------

### Run Playground Environment

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/guide/contribution.md

Start the playground environment to test changes in a sample Nuxt application. Access the playground app at `http://localhost:3000`.

```bash
pnpm run dev:build
```

--------------------------------

### Start Nuxt 3 Development Server

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/test/fixtures/content/README.md

Run this command to start the local development server. The application will be available at http://localhost:3000. Commands are available for npm, pnpm, yarn, and bun.

```bash
npm run dev
```

```bash
pnpm run dev
```

```bash
yarn dev
```

```bash
bun run dev
```

--------------------------------

### Complete Example

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/react-package.md

A comprehensive example demonstrating the usage of various translation and locale management functions within a React component.

```APIDOC
## Complete Example

### Description
This example showcases a `HomePage` component utilizing multiple features of the `useI18n` hook, including basic translation, pluralization, number formatting, date formatting, relative time formatting, and locale switching.

### Code Example
```tsx
import { useI18n } from '@i18n-micro/react'

function HomePage() {
  const { t, tc, tn, td, tdr, locale, setLocale } = useI18n()

  return (
    <div>
      <h1>{t('home.title')}</h1>
      <p>{t('greeting', { name: 'World' })}</p>
      <p>{tc('apples', 5)}</p>
      <p>{t('number', { number: tn(1234.56) })}</p>
      <p>{t('date', { date: td(new Date()) })}</p>
      <p>{t('relativeDate', { relativeDate: tdr(Date.now() - 86400000) })}
      
      <button onClick={() => setLocale('fr')}>
        Switch to French
      </button>
    </div>
  )
}
```
```

--------------------------------

### Quick Start: Create and Use I18n Instance

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/integrations/nodejs-package.md

Initialize the I18n instance with basic options, load translations, and then use the `t` and `tc` methods for translations.

```typescript
import { createI18n } from '@i18n-micro/node'

// 1. Create I18n instance
const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  translationDir: './locales', // Path to your locales directory
})

// 2. Load translations from directory
await i18n.loadTranslations()

// 3. Use translations
console.log(i18n.t('greeting', { name: 'John' })) // "Hello, John!"
console.log(i18n.tc('apples', 5)) // "5 apples"
```

--------------------------------

### Run Nuxt Development Server

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/guide/contribution.md

Start the Nuxt development server using the `playground` directory for testing. Access the app at `http://localhost:3000`.

```bash
pnpm run dev
```

--------------------------------

### Complete Example: Product Page with Locale-Specific Slugs

Source: https://github.com/s00d/nuxt-i18n-micro/blob/main/docs/guide/custom-locale-routes.md

A full example demonstrating the integration of localeRoutes and $setI18nRouteParams for product detail pages. It includes fetching product data, defining routes, setting locale-specific slugs, and a basic template with a locale switcher.

```vue
<template>
  <div v-if="product">
    <h1>{{ product.title }}</h1>
    <p>{{ $t('price') }}: {{ product.price }}</p>
    <div class="locale-switcher">
      <a :href="$switchLocalePath('en')">English</a>
      <a :href="$switchLocalePath('es')">Español</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useNuxtApp, useRoute, useFetch, createError } from '#imports'

interface Product {
  title: string
  price: string
  urlEn: string
  urlEs: string
}

const { $t, $defineI18nRoute, $setI18nRouteParams, $switchLocalePath } = useNuxtApp()

// Set page name for easier navigation
definePageMeta({ name: 'product-slug' })

const route = useRoute()
const slug = Array.isArray(route.params.slug) ? route.params.slug[0] : route.params.slug

// Fetch product data
const { data: product, error } = await useFetch<Product>(`/api/product/${slug}`)
if (error.value) throw createError({
  statusCode: error.value?.statusCode,
  statusMessage: error.value?.statusMessage,
  fatal: true,
})

// Define locale-specific routes with dynamic segments
$defineI18nRoute({
  localeRoutes: {
    en: '/our-products/[...slug]',
    es: '/nuestros-productos/[...slug]',
  },
})

// Set locale-specific slugs so $switchLocalePath works correctly
if (product.value) {
  $setI18nRouteParams({
    en: { slug: product.value.urlEn },
    es: { slug: product.value.urlEs },
  })
}
</script>
```