Ask your question and get a summary of the document by referencing this page and the AI provider of your choice
Version History
- "Bundled into intlayer(); init doc"v9.0.025/06/2026
The content of this page was translated using an AI.
See the last version of the original content in EnglishIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
intlayerCompiler
intlayerCompiler is a Vite plugin that scans component source files for inline Intlayer content declarations — content defined directly inside a component rather than in a separate .content.ts file — and writes them to dictionary JSON files during the transform phase.
Since Intlayer v9intlayerCompileris automatically included inside the mainintlayer()plugin when bothcompiler.enabledistrueandcompiler.outputis set in your Intlayer config. You only need to register it separately when you want full control over compiler-specific configuration.
Usage
As part of intlayer() (recommended, v9+)
Enable the compiler through your Intlayer config:
Copy the code to the clipboard
// intlayer.config.tsimport { defineConfig } from "intlayer";export default defineConfig({ compiler: { enabled: true, output: "./src/dictionaries", // where extracted dictionaries are written },});Then use the standard plugin with no extra registration:
Copy the code to the clipboard
// vite.config.tsimport { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({ plugins: [intlayer()],});Standalone (when needed)
Copy the code to the clipboard
// vite.config.tsimport { defineConfig } from "vite";import { intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [intlayerCompiler()],});Options
Copy the code to the clipboard
import type { IntlayerCompilerOptions } from "vite-intlayer";Open the table in a modal to view all data content clearly
| Option | Type | Description |
|---|---|---|
configOptions | GetConfigurationOptions | Intlayer configuration overrides forwarded to getConfiguration(). |
compilerConfig | Partial<CompilerConfig> | Overrides for the compiler-specific config section (e.g. enabled, output, filesList). |
Example
Copy the code to the clipboard
intlayerCompiler({ configOptions: { configFile: "./config/intlayer.config.ts" }, compilerConfig: { enabled: true, output: "./src/dictionaries" },});How it works
Transform phase
For every source file that matches compiler.filesList, the compiler plugin:
- Passes the file content through
extractContentfrom@intlayer/babel. - Calls
onExtractfor each declaration found, which writes the resulting dictionary JSON tocompiler.output. - Returns the transformed source code with inline declarations replaced by standard
useIntlayer('key')/getIntlayer('key')calls.
Supported file types: .ts, .tsx, .js, .jsx, .vue, .svelte, .astro.
HMR (Hot Module Replacement)
When a component file is saved in development mode, the compiler:
- Detects the file change via Vite's
handleHotUpdatehook. - Re-extracts content from the updated file.
- Writes the updated dictionary JSON.
- Triggers a full page reload (
server.ws.send({ type: 'full-reload' })).
A 500 ms debounce prevents the dictionary write itself (which also triggers a file-change event) from causing an infinite re-extraction loop.
Deduplication
intlayerCompiler uses the same createPrimaryInstanceGuard deduplication mechanism as the other bundled plugins. When both intlayer() (which bundles the compiler) and a manual intlayerCompiler() call are present, only the first registered instance runs — no dictionaries are written twice.