Intlayer

https://intlayer.org/doc
Admin
Intlayer is an internationalization library for JavaScript developers, offering robust content...
Tokens:266,846
Snippets:3,276
Trust Score:7.2
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install @intlayer/api

Source: https://intlayer.org/doc/concept/cms

Install the SDK using your preferred package manager.

```bash
npm install @intlayer/api
```

```bash
yarn add @intlayer/api
```

```bash
pnpm add @intlayer/api
```

```bash
bun add @intlayer/api
```

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

### Install next-intlayer

Source: https://intlayer.org/doc/packages/next-intlayer/exports

Install the package via npm.

```bash
npm install next-intlayer
```

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

### Install @intlayer/lsp package

Source: https://intlayer.org/doc/lsp

Install the LSP server as a development dependency in your project.

```bash
npm install --save-dev @intlayer/lsp
```

```bash
yarn add --dev @intlayer/lsp
```

```bash
pnpm add --save-dev @intlayer/lsp
```

```bash
bun add --dev @intlayer/lsp
```

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

### Install intlayer-cli

Source: https://intlayer.org/doc/packages/intlayer-cli/exports

Install the package using your preferred package manager.

```bash
npm install intlayer-cli
```

```bash
yarn add intlayer-cli
```

```bash
pnpm add intlayer-cli
```

```bash
bun add intlayer-cli
```

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

### Install astro-intlayer

Source: https://intlayer.org/doc/packages/astro-intlayer/exports

Install the package using npm.

```bash
npm install astro-intlayer
```

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

### Install react-intlayer

Source: https://intlayer.org/doc/packages/react-intlayer/exports

Install the package using npm.

```bash
npm install react-intlayer
```

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

### Install solid-intlayer

Source: https://intlayer.org/doc/packages/solid-intlayer/exports

Command to install the package via npm.

```bash
npm install solid-intlayer
```

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

### Install fastify-intlayer

Source: https://intlayer.org/doc/packages/fastify-intlayer/exports

Install the package using npm.

```bash
npm install fastify-intlayer
```

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

### Install hono-intlayer

Source: https://intlayer.org/doc/packages/hono-intlayer/exports

Install the package using npm.

```bash
npm install hono-intlayer
```

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

### Install Intlayer Packages

Source: https://intlayer.org/doc/environment/astro

Install the core Intlayer and Astro integration packages.

```bash
npm install intlayer astro-intlayer
```

```bash
pnpm add intlayer astro-intlayer
```

```bash
yarn add intlayer astro-intlayer
```

```bash
bun add intlayer astro-intlayer
```

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

### Install lynx-intlayer

Source: https://intlayer.org/doc/packages/lynx-intlayer/exports

Install the package via npm to begin integration.

```bash
npm install lynx-intlayer
```

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

### Install and run Intlayer MCP server via CLI

Source: https://intlayer.org/doc/mcp-server

Use these commands to install the package globally or execute it directly using npx.

```bash
# Install globally
npm install -g @intlayer/mcp

# Or use directly with npx (recommended)
npx @intlayer/mcp
```

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

### Install Intlayer and Preact Dependencies

Source: https://intlayer.org/doc/environment/astro/preact

Install the required packages for Intlayer and Preact integration.

```bash
npm install intlayer astro-intlayer preact preact-intlayer @astrojs/preact
```

```bash
pnpm add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
```

```bash
yarn add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
```

```bash
bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
```

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

### Install Intlayer Dependencies

Source: https://intlayer.org/doc/environment/vite-and-vanilla

Install the core, vanilla, and Vite-specific Intlayer packages.

```bash
npm install intlayer vanilla-intlayer
npm install vite-intlayer --save-dev
```

```bash
pnpm add intlayer vanilla-intlayer
pnpm add vite-intlayer --save-dev
```

```bash
yarn add intlayer vanilla-intlayer
yarn add vite-intlayer --save-dev
```

```bash
bun add intlayer vanilla-intlayer
bun add vite-intlayer --dev
```

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

### Install Sync PO plugin

Source: https://intlayer.org/doc/plugin/sync-po

Install the plugin as a development dependency using your preferred package manager.

```bash
pnpm add -D @intlayer/sync-po-plugin
# or
npm i -D @intlayer/sync-po-plugin
```

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

### JSON output example

Source: https://intlayer.org/doc/concept/cli/list

Example of the JSON output format.

```bash
$ npx intlayer content list --json

[{"key":"home-page","path":"src/components/HomePage/homePage.content.ts"},{"key":"server-component","path":"src/components/ServerComponent/serverComponent.content.ts"},{"key":"client-component","path":"src/components/ClientComponent/clientComponent.content.ts"}]
```

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

### Install Intlayer migration packages

Source: https://intlayer.org/doc/migration/react-i18next

Install the necessary compatibility packages via npm.

```bash
npm install @intlayer/next-i18next next-intlayer
```

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

### Formatted output example

Source: https://intlayer.org/doc/concept/cli/list

Example of the standard formatted output showing keys and relative paths.

```bash
npx intlayer content list
Content declaration files:
 - home-page        - src/components/HomePage/homePage.content.ts
 - server-component - src/components/ServerComponent/serverComponent.content.ts
 - client-component - src/components/ClientComponent/clientComponent.content.ts

Total content declaration files: 3
```

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

### Install sync-json-plugin

Source: https://intlayer.org/doc/plugin/sync-json

Install the package as a development dependency using your preferred package manager.

```bash
pnpm add -D @intlayer/sync-json-plugin
# or
npm i -D @intlayer/sync-json-plugin
```

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

### Install next-intl dependencies

Source: https://intlayer.org/doc/next-intl

Install the required package using your preferred package manager.

```bash
npm install next-intl
```

```bash
pnpm add next-intl
```

```bash
yarn add next-intl
```

```bash
bun add next-intl
```

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

### Install Intlayer and Lit dependencies

Source: https://intlayer.org/doc/environment/astro/lit

Install the required packages for Intlayer and Lit integration.

```bash
npm install intlayer astro-intlayer lit lit-intlayer @astrojs/lit
```

```bash
pnpm add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
```

```bash
yarn add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
```

```bash
bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
```

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

### Install Intlayer Dependencies

Source: https://intlayer.org/doc/environment/adonisjs

Install the required packages for Intlayer integration.

```bash
npm install intlayer adonis-intlayer
```

```bash
pnpm add intlayer adonis-intlayer
```

```bash
yarn add intlayer adonis-intlayer
```

```bash
bun add intlayer adonis-intlayer
```

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

### Install framework-specific compilers

Source: https://intlayer.org/doc/compiler

Install additional compiler packages for Vue or Svelte projects.

```bash
# For Vue
npm install @intlayer/vue-compiler

# For Svelte
npm install @intlayer/svelte-compiler
```

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

### Install Intlayer Dependencies

Source: https://intlayer.org/doc/next-i18next

Commands to install the core Intlayer package and the sync-json plugin.

```bash
npm install intlayer @intlayer/sync-json-plugin --save-dev
```

```bash
pnpm add intlayer @intlayer/sync-json-plugin --save-dev
```

```bash
yarn add intlayer @intlayer/sync-json-plugin --dev
```

```bash
bun add intlayer @intlayer/sync-json-plugin --dev
```

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

### Install localized routing dependencies

Source: https://intlayer.org/doc/environment/vite-and-svelte

Commands to install svelte-spa-router and initialize Intlayer for localized routing.

```bash
npm install svelte-spa-router
npx intlayer init
```

```bash
pnpm add svelte-spa-router
pnpm intlayer init
```

```bash
yarn add svelte-spa-router
yarn intlayer init
```

```bash
bun add svelte-spa-router
```

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

### Install Intlayer Babel Plugin

Source: https://intlayer.org/doc/environment/nextjs/compiler

Install the Babel plugin for content extraction if not using the default plugin.

```bash
npm install @intlayer/babel --save-dev
```

```bash
pnpm add @intlayer/babel --save-dev
```

```bash
yarn add @intlayer/babel --save-dev
```

```bash
bun add @intlayer/babel --dev
```

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

### Install Intlayer Editor

Source: https://intlayer.org/doc/concept/editor

Install the editor as a development dependency using your preferred package manager.

```bash
npm install intlayer-editor --save-dev
```

```bash
yarn add intlayer-editor --save-dev
```

```bash
pnpm add intlayer-editor --save-dev
```

```bash
bun add intlayer-editor --dev
```

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

### Install Intlayer Packages

Source: https://intlayer.org/doc/environment/lynx-and-react

Install the core Intlayer packages required for React and Lynx integration.

```bash
npm install intlayer react-intlayer lynx-intlayer
```

```bash
pnpm add intlayer react-intlayer lynx-intlayer
```

```bash
yarn add intlayer react-intlayer lynx-intlayer
```

```bash
bun add intlayer react-intlayer lynx-intlayer
```

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

### Install Intlayer SWC Plugin

Source: https://intlayer.org/doc/environment/nextjs/no-locale-path

Install the SWC plugin to optimize bundle size by replacing useIntlayer calls with macros.

```bash
npm install @intlayer/swc --save-dev
```

```bash
pnpm add @intlayer/swc --save-dev
```

```bash
yarn add @intlayer/swc --save-dev
```

```bash
bun add @intlayer/swc --dev
```

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

### Install Intlayer CLI SDK

Source: https://intlayer.org/doc/concept/cli/sdk

Install the package as a development dependency using your preferred package manager.

```bash
npm install @intlayer/cli --save-dev
```

```bash
yarn add @intlayer/cli --save-dev
```

```bash
pnpm add @intlayer/cli --save-dev
```

```bash
bun add @intlayer/cli --dev
```

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

### Install Intlayer CLI globally

Source: https://intlayer.org/doc/concept/cli

Install the CLI tool globally using your preferred package manager.

```bash
npm install intlayer-cli -g
```

```bash
yarn add intlayer-cli -g
```

```bash
pnpm add intlayer-cli -g
```

```bash
bun add intlayer-cli -g
```

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

### Install language server binary globally

Source: https://intlayer.org/doc/lsp

Install the binary globally to make it available on your system PATH for Claude Code.

```bash
npm install -g @intlayer/lsp
```

```bash
yarn global add @intlayer/lsp
```

```bash
pnpm add -g @intlayer/lsp
```

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

### Project Structure Example

Source: https://intlayer.org/doc

Shows the recommended file organization for a component using Intlayer.

```bash
.└── Components    └── MyComponent        ├── index.content.ts        └── index.tsx
```

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

### Install Webpack Bundle Analyzer

Source: https://intlayer.org/doc/concept/bundle-optimization

Install the standard bundle analyzer for custom Webpack, CRA, or Angular setups.

```bash
npm install -D webpack-bundle-analyzer
```

```bash
yarn add -D webpack-bundle-analyzer
```

```bash
pnpm add -D webpack-bundle-analyzer
```

```bash
bun add -d webpack-bundle-analyzer
```

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

### Configure PO Plugin in intlayer.config.ts

Source: https://intlayer.org/doc/plugin/sync-po

Add the loadPO plugin to your configuration to ingest PO files. This example demonstrates a standard setup for multiple locales.

```ts
import { Locales, type IntlayerConfig } from "intlayer";
import { loadPO } from "@intlayer/sync-po-plugin";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },

  plugins: [
    // Ingest PO messages located anywhere in your source tree
    loadPO({
      source: ({ key }) => `./src/**/${key}.i18n.po`,
      // Load a single locale per plugin instance (defaults to the config defaultLocale)
      locale: Locales.ENGLISH,
      priority: 0,
    }),
  ],
};

export default config;
```

```ts
import { Locales, type IntlayerConfig } from "intlayer";
import { loadPO } from "@intlayer/sync-po-plugin";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH],
    defaultLocale: Locales.ENGLISH,
  },
  plugins: [
    loadPO({
      // Only files for Locales.FRENCH will be loaded from this pattern
      source: ({ key, locale }) => `./locales/${locale}/${key}.po`,
      locale: Locales.FRENCH,
    }),
  ],
};

export default config;
```

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

### Configure Editor Start Script

Source: https://intlayer.org/doc/concept/editor

Use the --with flag in your package.json to run the editor alongside your development server.

```json5
{
  "scripts": {
    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
  },
}
```

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

### Define Intlayer configuration in TypeScript

Source: https://intlayer.org/doc/concept/configuration

Example configuration file demonstrating internationalization, dictionary, and routing options. Ensure the 'intlayer' package is installed to use the IntlayerConfig type.

```typescript
import { Locales, type IntlayerConfig } from "intlayer";
import { nextjsRewrite } from "intlayer/routing";
import { syncJSON } from "@intlayer/sync-json-plugin";
import { z } from "zod";

/**
 * Example Intlayer configuration file showing all available options.
 */
const config: IntlayerConfig = {
  /**
   * Configuration for internationalization settings.
   */
  internationalization: {
    /**
     * List of supported locales in the application.
     * Default: [Locales.ENGLISH]
     */
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],

    /**
     * List of required locales that must be defined in every dictionary.
     * If empty, all locales are required in `strict` mode.
     * Default: []
     */
    requiredLocales: [Locales.ENGLISH],

    /**
     * Strictness level for internationalized content.
     * - "strict": Errors if any declared locale is missing or undeclared.
     * - "inclusive": Warnings if a declared locale is missing.
     * - "loose": Accepts any existing locale.
     * Default: "inclusive"
     */
    strictMode: "inclusive",

    /**
     * Default locale used as a fallback if the requested locale is not found.
     * Default: Locales.ENGLISH
     */
    defaultLocale: Locales.ENGLISH,
  },

  /**
   * Settings that control dictionary operations and fallback behavior.
   */
  dictionary: {
    /**
     * Controls how dictionaries are imported.
     * - "static": Statically imported at build time.
     * - "dynamic": Dynamically imported using Suspense.
     * - "fetch": Fetched dynamically via the live sync API.
     * Default: "static"
     */
    importMode: "static",

    /**
     * Strategy for auto-filling missing translations using AI.
     * Can be a boolean or a path pattern to store filled content.
     * Default: true
     */
    fill: true,

    /**
     * Physical location of the dictionary files.
     * - "local": Stored in the local filesystem.
     * - "remote": Stored in the Intlayer CMS.
     * - "hybrid": Stored in the local filesystem and the Intlayer CMS.
     * - "plugin" (or any custom string): Provided by a plugin or a custom source.
     * Default: "local"
     */
    location: "local",

    /**
     * Whether to automatically transform content (e.g., Markdown to HTML).
     * Default: false
     */
    contentAutoTransformation: false,
  },

  /**
   * Routing and middleware configuration.
   */
  routing: {
    /**
     * Locale routing strategy.
     * - "prefix-no-default": Prefix all except the default locale (e.g., /dashboard, /fr/dashboard).
     * - "prefix-all": Prefix all locales (e.g., /en/dashboard, /fr/dashboard).
     * - "no-prefix": No locale in the URL.
     * - "search-params": Use ?locale=...
     * Default: "prefix-no-default"
     */
    mode: "prefix-no-default",

    /**
     * Enables the Intlayer locale-routing proxy (middleware).
     * When enabled, the build-tool integration (e.g. the `intlayer()` Vite plugin)
     * automatically wires the locale detection / redirect / rewrite middleware in
     * development, preview and production SSR. On Next.js, the `intlayerProxy`
     * middleware becomes a pass-through when disabled.
     * Default: true
     */
    enableProxy: true,

    /**
     * Where to store the user's selected locale.
     * Options: 'cookie', 'localStorage', 'sessionStorage', 'header', or an array of these.
     * Default: ['cookie', 'header']
     */
    storage: ["cookie", "header"],

    /**
     * Base path for the application URLs.
     * Default: ""
     */
    basePath: "",

    /**
     * Custom URL rewriting rules for locale-specific paths.
     */
    rewrite: nextjsRewrite({
      "/[locale]/about": {
        en: "/[locale]/about",
        fr: "/[locale]/a-propos",
      },
    }),

    /**
     * Maps locales to domain hostnames for domain-based routing.
     * URLs for these locales will be absolute (e.g., https://intlayer.cn/).
     * The domain implies the locale, so no locale prefix is added to the path.
     * Default: undefined
     */
    domains: {
      en: "intlayer.org",
      zh: "intlayer.cn",
    },
  }
```

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

### Install svelte-intlayer

Source: https://intlayer.org/doc/packages/svelte-intlayer/exports

Install the package via npm.

```bash
npm install svelte-intlayer
```

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

### Example output

Source: https://intlayer.org/doc/concept/cli/init

The console output displayed upon successful completion of the initialization process.

```bash
npx intlayer init
Checking Intlayer configuration...
✓ Added .intlayer to .gitignore
✓ Updated tsconfig.json to include intlayer types
✓ Created intlayer.config.ts
✓ Injected import into vite.config.ts
✓ Intlayer init setup complete.
```

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

### Example Formatted Output

Source: https://intlayer.org/doc/concept/cli/list-projects

Standard console output showing discovered project paths.

```bash
$ npx intlayer projects list --git-root

Found 3 Intlayer project(s):

  - /Users/user/workspace/packages/app
  - /Users/user/workspace/packages/admin
  - /Users/user/workspace/packages/shared
```

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

### Display Project File Structure

Source: https://intlayer.org/doc/concept/per-locale-file

Example directory structure for mixing content declaration formats.

```bash
.
└── Components
    └── MyComponent
        ├── index.content.ts
        ├── index.content.json
        └── index.ts
```

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

### Quick Start with Vue Formatters

Source: https://intlayer.org/doc/formatters

Basic implementation of currency and percentage formatting using Vue composables.

```vue
<script setup>
import {
  useNumber,
  useCurrency,
  useDate,
  usePercentage,
  useCompact,
  useList,
  useRelativeTime,
  useUnit,
  useIntl,
} from "vue-intlayer/format";

const currency = useCurrency();
const percentage = usePercentage();
</script>

<template>
  <div>
    <p>Price: {{ currency.value(1234.5, { currency: "EUR" }) }}</p>
    <p>Discount: {{ percentage.value(0.25) }}</p>
  </div>
</template>
```

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

### Install express-intlayer

Source: https://intlayer.org/doc/packages/express-intlayer/exports

Install the package via npm.

```bash
npm install express-intlayer
```

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

### Start the Intlayer Editor

Source: https://intlayer.org/doc/concept/editor

Launch the editor service. Ensure the application is running in parallel and the application URL matches the editor configuration.

```bash
npx intlayer-editor start
```

```bash
yarn intlayer-editor start
```

```bash
pnpm intlayer-editor start
```

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

### Install Intlayer Dependencies

Source: https://intlayer.org/doc/environment/vanilla

Commands to generate the standalone bundle, initialize the configuration, and build dictionaries using various package managers.

```bash
# Generate a standalone bundle of intlayer and vanilla-intlayer
# This file will be imported in to your HTML file
npx intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js

# Initialize intlayer with config file
npx intlayer init --no-gitignore

# Build the dictionaries
npx intlayer build
```

```bash
# Generate a standalone bundle of intlayer and vanilla-intlayer
# This file will be imported in to your HTML file
pnpm intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js

# Initialize intlayer with config file
pnpm intlayer init --no-gitignore

# Build the dictionaries
pnpm intlayer build
```

```bash
# Generate a standalone bundle of intlayer and vanilla-intlayer
# This file will be imported in to your HTML file
yarn intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js

# Initialize intlayer config file, TypeScript if set up, env var
yarn intlayer init --no-gitignore

# Build the dictionaries
yarn intlayer build
```

```bash
# Generate a standalone bundle of intlayer and vanilla-intlayer
# This file will be imported in to your HTML file
bun x intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js

# Initialize intlayer with config file
bun x intlayer init --no-gitignore

# Build the dictionaries
bun x intlayer build
```

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

### Initialize Intlayer

Source: https://intlayer.org/doc/concept/cli/init

Run the initialization command using your preferred package manager to set up Intlayer in the current directory.

```bash
npx intlayer init
```

```bash
yarn intlayer init
```

```bash
pnpm intlayer init
```

```bash
bun x intlayer init
```

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

### Install nuxt-intlayer

Source: https://intlayer.org/doc/packages/nuxt-intlayer/exports

Use this command to install the package via npm.

```bash
npm install nuxt-intlayer
```

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

### Project Structure for Content Declaration

Source: https://intlayer.org/doc/concept/how-works-intlayer

Example of placing content declaration files in the same directory as the component.

```bash
.
└── Components
    └── MyComponent
        ├── index.content.ts
        └── index.tsx
```

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

### Initialize with custom project root

Source: https://intlayer.org/doc/concept/cli/init

Specify a custom directory for Intlayer initialization using the --project-root flag.

```bash
npx intlayer init --project-root ./my-project
```

```bash
yarn intlayer init --project-root ./my-project
```

```bash
pnpm intlayer init --project-root ./my-project
```

```bash
bun x intlayer init --project-root ./my-project
```

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

### Install angular-intlayer

Source: https://intlayer.org/doc/packages/angular-intlayer/exports

Install the package via npm to begin integration.

```bash
npm install angular-intlayer
```

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

### Example JSON Output

Source: https://intlayer.org/doc/concept/cli/list-projects

Programmatic output format for project discovery.

```bash
$ npx intlayer projects list --json

["/Users/user/workspace/packages/app","/Users/user/workspace/packages/admin","/Users/user/workspace/packages/shared"]
```

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

### Install adonis-intlayer

Source: https://intlayer.org/doc/packages/adonis-intlayer/exports

Use npm to install the package in your AdonisJS project.

```bash
npm install adonis-intlayer
```

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

### Install Dependencies

Source: https://intlayer.org/doc/environment/vite-and-solid

Install the required @solidjs/router package for routing functionality.

```bash
npm install @solidjs/router
```

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

### Configure test command options

Source: https://intlayer.org/doc/concept/cli/test

Examples of using configuration flags like base directory, environment files, and cache settings.

```bash
npx intlayer content test --base-dir ./src --env-file .env.production.local
```

```bash
npx intlayer build --no-cache
```

```bash
npx intlayer content test --verbose
```

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

### Install vue-intlayer package

Source: https://intlayer.org/doc/packages/vue-intlayer/exports

Install the package via npm to begin integration.

```bash
npm install vue-intlayer
```

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

### Setup Fastify Application

Source: https://intlayer.org/doc/environment/fastify

Register the intlayer plugin and implement localized routes.

```typescript
import Fastify from "fastify";
import { intlayer, t, getDictionary, getIntlayer } from "fastify-intlayer";
import dictionaryExample from "./index.content";

const fastify = Fastify({ logger: true });

// Load internationalization plugin
await fastify.register(intlayer);

// Routes
fastify.get("/t_example", async (_req, reply) => {
  return t({
    en: "Example of returned content in English",
    fr: "Exemple de contenu renvoyé en français",
    "es-ES": "Ejemplo de contenido devuelto en español (España)",
    "es-MX": "Ejemplo de contenido devuelto en español (México)",
  });
});

fastify.get("/getIntlayer_example", async (_req, reply) => {
  return getIntlayer("index").exampleOfContent;
});

fastify.get("/getDictionary_example", async (_req, reply) => {
  return getDictionary(dictionaryExample).exampleOfContent;
});

// Start server
const start = async () => {
  try {
    await fastify.listen({ port: 3000 });
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};

start();
```

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

### Install react-native-intlayer

Source: https://intlayer.org/doc/packages/react-native-intlayer/exports

Use npm to install the package in your React Native project.

```bash
npm install react-native-intlayer
```

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

### Configure Build and Environment Options

Source: https://intlayer.org/doc/concept/cli/push

Use these flags to manage cache, environment files, and build processes during the push.

```bash
npx intlayer dictionary push --env-file .env.production.local
```

```bash
npx intlayer build --no-cache
```

```bash
npx intlayer dictionary push --env production
```

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

### Start Editor with Environment File

Source: https://intlayer.org/doc/concept/editor

Specify a custom environment file using the --env-file or -f flag. The file must be located in the project root.

```bash
npx intlayer-editor start -f .env.development
```

```bash
yarn intlayer-editor start -f .env.development
```

```bash
pnpm intlayer-editor start -f .env.development
```

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

### setupIntlayer

Source: https://intlayer.org/doc/packages/svelte-intlayer/exports

Initializes the Intlayer configuration within a Svelte application.

```APIDOC
## setupIntlayer

### Description
Function to setup Intlayer in your Svelte application.

### Usage
```typescript
import { setupIntlayer } from 'svelte-intlayer';
setupIntlayer();
```
```

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

### Install Required Dependencies

Source: https://intlayer.org/doc/environment/hono

Install the necessary packages for internationalization in your Hono project.

```bash
npm install intlayer hono-intlayer
```

```bash
pnpm add intlayer hono-intlayer
```

```bash
yarn add intlayer hono-intlayer
```

```bash
bun add intlayer hono-intlayer
```

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

### Bootstrap Intlayer in Entry Point

Source: https://intlayer.org/doc/environment/vite-and-vanilla

Initialize the Intlayer client before rendering content. Optionally include markdown support if needed.

```typescript
import { installIntlayer } from "vanilla-intlayer";

// Must be called before rendering any i18n content.
installIntlayer();

// Import and run your app modules.
import "./app.js";
```

```typescript
import { installIntlayer, installIntlayerMarkdown } from "vanilla-intlayer";

installIntlayer();
installIntlayerMarkdown();

import "./app.js";
```

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

### Install Required Dependencies

Source: https://intlayer.org/doc/environment/express

Install the necessary packages for internationalization in your Express application.

```bash
npm install intlayer express-intlayer
```

```bash
pnpm add intlayer express-intlayer
```

```bash
yarn add intlayer express-intlayer
```

```bash
bun add intlayer express-intlayer
```

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

### Install @intlayer/babel for Webpack

Source: https://intlayer.org/doc/concept/bundle-optimization

Install the Babel plugin package for Webpack environments.

```bash
npm install -D @intlayer/babel
```

```bash
yarn add -D @intlayer/babel
```

```bash
pnpm add -D @intlayer/babel
```

```bash
bun add -d @intlayer/babel
```

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

### Complete Formatting Example

Source: https://intlayer.org/doc/formatters

Demonstrates the usage of all available formatting composables in a single component.

```vue
<script setup>
import {
  useNumber,
  useCurrency,
  useDate,
  usePercentage,
  useCompact,
  useList,
  useRelativeTime,
  useUnit,
} from "vue-intlayer/format";

const number = useNumber();
const currency = useCurrency();
const date = useDate();
const percentage = usePercentage();
const compact = useCompact();
const list = useList();
const relativeTime = useRelativeTime();
const unit = useUnit();
</script>

<template>
  <div>
    <p>{{ number.value(123456.789) }}</p>
    <p>{{ currency.value(1234.5, { currency: "EUR" }) }}</p>
    <p>{{ date.value(new Date(), "short") }}</p>
    <p>{{ percentage.value(0.25) }}</p>
    <p>{{ compact.value(1200) }}</p>
    <p>{{ list.value(["apple", "banana", "orange"]) }}</p>
    <p>{{ relativeTime.value(new Date(), new Date(Date.now() + 86400000)) }}</p>
    <p>{{ unit.value(5, { unit: "kilometer" }) }}</p>
  </div>
</template>
```

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

### Install Vite Intlayer plugin

Source: https://intlayer.org/doc/compiler

Install the required package for Vite-based applications.

```bash
npm install vite-intlayer
```

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

### Apply custom instructions

Source: https://intlayer.org/doc/concept/cli/doc-review

Pass specific rules to the AI prompt, either as a string or from a file.

```bash
npx intlayer doc review --custom-instructions "Avoid translating urls, and keep the markdown format"
```

```bash
npx intlayer doc review --custom-instructions "$(cat ./instructions.md)"
```

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

### Compile Components with Intlayer

Source: https://intlayer.org/doc/environment/nextjs/compiler

Examples showing how to structure components for Intlayer compilation and the resulting content dictionary format.

```tsx
import type { FC } from "react";
import { IntlayerServerProvider } from "next-intlayer/server";
import { getLocale } from "next-intlayer/server";

const PageContent: FC = () => {
  return (
    <>
      <p>Get started by editing</p>
      <code>src/app/page.tsx</code>
    </>
  );
};

export default async function Page() {
  const locale = await getLocale();

  return (
    <IntlayerServerProvider locale={locale}>
      <PageContent />
    </IntlayerServerProvider>
  );
}
```

```ts
{
  key: "page-content",
  content: {
    nodeType: "translation",
    translation: {
      en: {
        getStartedByEditing: "Get started by editing",
      },
      fr: {
        getStartedByEditing: "Commencez par éditer",
      },
      es: {
        getStartedByEditing: "Comience editando",
      },
    }
  }
}
```

```tsx
import { type FC } from "react";
import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";
import { getLocale } from "next-intlayer/server";

const PageContent: FC = () => {
  const content = useIntlayer("page-content");

  return (
    <>
      <p>{content.getStartedByEditing}</p>
      <code>src/app/page.tsx</code>
    </>
  );
};

export default async function Page() {
  const locale = await getLocale();

  return (
    <IntlayerServerProvider locale={locale}>
      <PageContent />
    </IntlayerServerProvider>
  );
}
```

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

### Install Intlayer dependencies

Source: https://intlayer.org/doc/environment/astro/react

Install the required packages for Intlayer and React integration in Astro.

```bash
npm install intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
```

```bash
pnpm add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
```

```bash
yarn add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
```

```bash
bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
```

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

### Build or run the application with the compiler

Source: https://intlayer.org/doc/environment/astro/lit

Commands to build or run the application after configuring the compiler plugin.

```bash
npm run build # Or npm run dev
```

```bash
pnpm run build # Or pnpm run dev
```

```bash
yarn build # Or yarn dev
```

```bash
bun run build # Or bun run dev
```
Tokens:
Raw