@intlayer/docs 8.5.0 → 8.5.1

package/docs/de/intlayer_with_analog.md

@@ -23,6 +23,14 @@ history:
 
 # Übersetzen Sie Ihre Analog (Angular) App mit Intlayer | Internationalisierung (i18n)
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-analog-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## Inhaltsverzeichnis
 
 <TOC/>
@@ -42,20 +50,6 @@ Mit Intlayer können Sie:
 
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer Analog-Anwendung
 
-<Tabs defaultTab="code">
-  <Tab label="Code" value="code">
-
-<iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer/tree/main/examples/vite-analog-app?embed=1&ctl=1&file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - So internationalisieren Sie Ihre Anwendung mit Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
 Siehe [Anwendungsvorlage](https://github.com/aymericzip/intlayer-analog-template) auf GitHub.
 
 ### Schritt 1: Abhängigkeiten installieren

package/docs/de/intlayer_with_vite+lit.md

@@ -24,6 +24,14 @@ history:
 
 # Übersetzen Sie Ihre Vite- und Lit-Website mit Intlayer | Internationalisierung (i18n)
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-vite-lit-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## Inhaltsverzeichnis
 
 <TOC/>
@@ -640,63 +648,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-<Tabs>
- <Tab value='Extract-Befehl'>
-
-Führen Sie den Extractor aus, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren
-
-```bash packageManager="npm"
-npx intlayer extract
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer extract
-```
-
-```bash packageManager="yarn"
-yarn intlayer extract
-```
-
-```bash packageManager="bun"
-bunx intlayer extract
-```
-
- </Tab>
- <Tab value='Babel-Compiler'>
-
-Aktualisieren Sie Ihre `vite.config.ts`, um das `intlayerCompiler`-Plugin aufzunehmen:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Fügt das Compiler-Plugin hinzu
-  ],
-});
-```
-
-```bash packageManager="npm"
-npm run build # Oder npm run dev
-```
-
-```bash packageManager="pnpm"
-pnpm run build # Oder pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # Oder yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # Oder bun run dev
-```
-
- </Tab>
-</Tabs>
-
 ### TypeScript konfigurieren
 
 Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält.

package/docs/de/intlayer_with_vite+vue.md

@@ -455,14 +455,14 @@ Um die Internationalisierungsfunktionen von Intlayer in Ihrer gesamten Vue-Anwen
 
 ```javascript fileName=main.js
 import { createApp } from "vue";
-import { installIntlayer } from "vue-intlayer";
+import { intlayer } from "vue-intlayer";
 import App from "./App.vue";
 import "./style.css";
 
 const app = createApp(App);
 
 // Den Provider auf der obersten Ebene einfügen
-installIntlayer(app);
+app.use(intlayer);
 
 // Die App mounten
 app.mount("#app");
@@ -1047,7 +1047,7 @@ import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";
 
 const app = createApp(App);
 
-installIntlayer(app);
+app.use(intlayer);
 
 const md = new MarkdownIt({
   html: true, // HTML-Tags erlauben

package/docs/en/compiler.md

@@ -296,6 +296,8 @@ The following properties can be configured in the `compiler` block of your `intl
   - _Type_: `boolean`
   - _Default_: `false`
   - _Description_: Indicates if the components should be saved after being transformed.
+    - If `true`, the compiler will rewrite the component file in the disk. The transformation will be permanent, and the compiler can then be removed.
+    - If `false`, the compiler will inject the `useIntlayer()` function call into the code in the build output only, and keep the base codebase intact. The transformation will be done only in memory.
 
 ### Fill missing translation
 

package/docs/en/configuration.md

@@ -936,14 +936,14 @@ Build options apply to the `@intlayer/babel` and `@intlayer/swc` plugins.
 
 Settings that control the Intlayer compiler, which extracts dictionaries straight from your components.
 
-| Field                 | Description                                                                                                                                                                                                                                                                                                | Type                                                                                                            | Default     | Example                                                                                                                                                  | Note                                                                                                                                                                                                                                                           |
-| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `enabled`             | Indicates if the compiler should be enabled to extract dictionaries.                                                                                                                                                                                                                                       | `boolean` &#124; <br/> `'build-only'`                                                                           | `true`      | `'build-only'`                                                                                                                                           | `'build-only'` skips the compiler during development to speed up builds; only runs on build commands.                                                                                                                                                          |
-| `dictionaryKeyPrefix` | Prefix for the extracted dictionary keys.                                                                                                                                                                                                                                                                  | `string`                                                                                                        | `''`        | `'my-key-'`                                                                                                                                              | Added to the generated key (based on file name) to prevent conflicts.                                                                                                                                                                                          |
-| `saveComponents`      | Indicates if components should be saved after being transformed.                                                                                                                                                                                                                                           | `boolean`                                                                                                       | `false`     |                                                                                                                                                          | • If `true`, replaces original files with transformed files.<br/>• The compiler can then be removed after one run.                                                                                                                                             |
-| `output`              | Defines the output file path. Replaces `outputDir`. Supports template variables: `{{fileName}}`, <br/> `{{key}}`, <br/> `{{locale}}`, <br/> `{{extension}}`, <br/> `{{componentFileName}}`, <br/> `{{componentExtension}}`, <br/> `{{format}}`, <br/> `{{componentFormat}}`, <br/> `{{componentDirPath}}`. | `boolean` &#124; <br/> `FilePathPattern` &#124; <br/> `Partial<Record<Locale, boolean &#124; FilePathPattern>>` | `undefined` | `'./{{fileName}}{{extension}}'` <br/> `'/locales/{{locale}}/{{key}}.json'` <br/> `{ en: ({ key }) => './locales/en/${key}.json', fr: '...', es: false }` | • `./` paths resolve relative to the component directory.<br/>• `/` paths resolve relative to the project root.<br/>• Including `{{locale}}` generates separate per-locale dictionaries.<br/>• Supports per-locale object notation; `false` skips that locale. |
-| `noMetadata`          | If `true`, the compiler omits dictionary metadata (key, content wrapper) from the output.                                                                                                                                                                                                                  | `boolean`                                                                                                       | `false`     | `false` → `{"key":"my-key","content":{"key":"value"}}` <br/> `true` → `{"key":"value"}`                                                                  | • Useful for i18next or ICU MessageFormat JSON outputs.<br/>• Works well with `loadJSON` plugin.                                                                                                                                                               |
-| `dictionaryKeyPrefix` | Dictionary key prefix                                                                                                                                                                                                                                                                                      | `string`                                                                                                        | `''`        |                                                                                                                                                          | Add an optional prefix for the extracted dictionary keys                                                                                                                                                                                                       |
+| Field                 | Description                                                                                                                                                                                                                                                                                                | Type                                                                                                            | Default     | Example                                                                                                                                                  | Note                                                                                                                                                                                                                                                                                                       |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `enabled`             | Indicates if the compiler should be enabled to extract dictionaries.                                                                                                                                                                                                                                       | `boolean` &#124; <br/> `'build-only'`                                                                           | `true`      | `'build-only'`                                                                                                                                           | `'build-only'` skips the compiler during development to speed up builds; only runs on build commands.                                                                                                                                                                                                      |
+| `dictionaryKeyPrefix` | Prefix for the extracted dictionary keys.                                                                                                                                                                                                                                                                  | `string`                                                                                                        | `''`        | `'my-key-'`                                                                                                                                              | Added to the generated key (based on file name) to prevent conflicts.                                                                                                                                                                                                                                      |
+| `saveComponents`      | Indicates if the components should be saved after being transformed.                                                                                                                                                                                                                                       | `boolean`                                                                                                       | `false`     |                                                                                                                                                          | • If `true`, the compiler will rewrite the component file in the disk. The transformation will be permanent, and the compiler can then be removed.<br/>• If `false`, the compiler will inject the `useIntlayer()` function call into the code in the build output only, and keep the base codebase intact. |
+| `output`              | Defines the output file path. Replaces `outputDir`. Supports template variables: `{{fileName}}`, <br/> `{{key}}`, <br/> `{{locale}}`, <br/> `{{extension}}`, <br/> `{{componentFileName}}`, <br/> `{{componentExtension}}`, <br/> `{{format}}`, <br/> `{{componentFormat}}`, <br/> `{{componentDirPath}}`. | `boolean` &#124; <br/> `FilePathPattern` &#124; <br/> `Partial<Record<Locale, boolean &#124; FilePathPattern>>` | `undefined` | `'./{{fileName}}{{extension}}'` <br/> `'/locales/{{locale}}/{{key}}.json'` <br/> `{ en: ({ key }) => './locales/en/${key}.json', fr: '...', es: false }` | • `./` paths resolve relative to the component directory.<br/>• `/` paths resolve relative to the project root.<br/>• Including `{{locale}}` generates separate per-locale dictionaries.<br/>• Supports per-locale object notation; `false` skips that locale.                                             |
+| `noMetadata`          | If `true`, the compiler omits dictionary metadata (key, content wrapper) from the output.                                                                                                                                                                                                                  | `boolean`                                                                                                       | `false`     | `false` → `{"key":"my-key","content":{"key":"value"}}` <br/> `true` → `{"key":"value"}`                                                                  | • Useful for i18next or ICU MessageFormat JSON outputs.<br/>• Works well with `loadJSON` plugin.                                                                                                                                                                                                           |
+| `dictionaryKeyPrefix` | Dictionary key prefix                                                                                                                                                                                                                                                                                      | `string`                                                                                                        | `''`        |                                                                                                                                                          | Add an optional prefix for the extracted dictionary keys                                                                                                                                                                                                                                                   |
 
 ### Custom Schemas
 

package/docs/en/dictionary/html.md

@@ -19,6 +19,9 @@ slugs:
   - content
   - html
 history:
+  - version: 8.5.0
+    date: 2026-03-24
+    changes: "Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
   - version: 8.5.0
     date: 2026-03-24
     changes: "move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/html`"
@@ -278,17 +281,17 @@ You can configure HTML rendering globally for your entire application. This is i
 
   </Tab>
   <Tab label="Vue" value="vue">
-  
+
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
-    import { installIntlayer } from "vue-intlayer";
-    import { installIntlayerHTML } from "vue-intlayer/html";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerHTML } from "vue-intlayer/html";
     import App from "./App.vue";
 
     const app = createApp(App);
 
-    app.use(installIntlayer);
-    app.use(installIntlayerHTML, {
+    app.use(intlayer);
+    app.use(intlayerHTML, {
       components: {
         p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),
         CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),
@@ -302,14 +305,14 @@ You can configure HTML rendering globally for your entire application. This is i
 
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
-    import { installIntlayer } from "vue-intlayer";
-    import { installIntlayerHTML } from "vue-intlayer/html";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerHTML } from "vue-intlayer/html";
     import App from "./App.vue";
 
     const app = createApp(App);
 
-    app.use(installIntlayer);
-    app.use(installIntlayerHTML, {
+    app.use(intlayer);
+    app.use(intlayerHTML, {
       renderHTML: async (html) => {
         const { renderHTML } = await import('vue-intlayer/html');
         return renderHTML(html);

package/docs/en/dictionary/markdown.md

@@ -17,6 +17,9 @@ slugs:
   - content
   - markdown
 history:
+  - version: 8.5.0
+    date: 2026-03-24
+    changes: "Add `intlayerMarkdown` plugin object; use `app.use(intlayerMarkdown)` instead of `app.use(installIntlayerMarkdown)`"
   - version: 8.5.0
     date: 2026-03-24
     changes: "move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/markdown`"
@@ -93,7 +96,7 @@ You can declare Markdown content using the `md` function or simply as a string (
 
 ---
 
-## Part 2: Rendering Markdown
+## Rendering Markdown
 
 Rendering can be handled automatically by Intlayer's content system or manually using specialized tools.
 
@@ -390,8 +393,6 @@ You can configure Markdown rendering globally for your entire application. This
 
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
           a: ({ href, children }) => <Link to={href}>{children}</Link>,
@@ -404,7 +405,7 @@ You can configure Markdown rendering globally for your entire application. This
 
     You can also use your own markdown renderer:
 
-        ```tsx fileName="AppProvider.tsx"
+    ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "react-intlayer/markdown";
 
     export const AppProvider = ({ children }) => (
@@ -426,21 +427,20 @@ You can configure Markdown rendering globally for your entire application. This
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
-    import { installIntlayer } from "vue-intlayer";
-    import { installIntlayerMarkdown } from "vue-intlayer/markdown";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerMarkdown } from "vue-intlayer/markdown";
     import App from "./App.vue";
 
     const app = createApp(App);
 
-    app.use(installIntlayer);
-    app.use(installIntlayerMarkdown, {
-      forceBlock: true,
-      tagfilter: true,
+    app.use(intlayer);
+    app.use(intlayerMarkdown, {
       components: {
-        h1: {
-          component: "h1",
-          props: { class: "text-2xl font-bold" },
-        },
+        h1: (props) =>
+        h('h1', { style: { color: 'orange' }, ...props }, props.children),
+        ComponentDemo: () => h('div', { style: { background: 'grey' } }, 'DEMO'),
+        bold: (props) => h('strong', props),
+        code: (props) => h('code', props),
       },
     });
 
@@ -451,14 +451,14 @@ You can configure Markdown rendering globally for your entire application. This
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
-    import { installIntlayer } from "vue-intlayer";
-    import { installIntlayerMarkdown } from "vue-intlayer/markdown";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerMarkdown } from "vue-intlayer/markdown";
     import App from "./App.vue";
 
     const app = createApp(App);
 
-    app.use(installIntlayer);
-    app.use(installIntlayerMarkdown, {
+    app.use(intlayer);
+    app.use(intlayerMarkdown, {
       renderMarkdown: async (md) => {
         const { compileMarkdown } = await import('vue-intlayer/markdown');
         return compileMarkdown(md);
@@ -480,8 +480,6 @@ You can configure Markdown rendering globally for your entire application. This
     </script>
 
     <MarkdownProvider
-      forceBlock={true}
-      tagfilter={true}
       components={{
         h1: MyHeading,
       }}
@@ -517,8 +515,6 @@ You can configure Markdown rendering globally for your entire application. This
 
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
         }}
@@ -555,8 +551,6 @@ You can configure Markdown rendering globally for your entire application. This
 
     export const AppProvider = (props) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,
         }}

package/docs/en/intlayer_with_analog.md

@@ -23,6 +23,14 @@ history:
 
 # Translate your Analog (Angular) app using Intlayer | Internationalization (i18n)
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-analog-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## Table of Contents
 
 <TOC/>
@@ -42,20 +50,6 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in an Analog Application
 
-<Tabs defaultTab="code">
-  <Tab label="Code" value="code">
-
-<iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-analog-template?embed=1&ctl=1&file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
 See [Application Template](https://github.com/aymericzip/intlayer-analog-template) on GitHub.
 
 ### Step 1: Install Dependencies

package/docs/en/intlayer_with_vite+lit.md

@@ -24,6 +24,14 @@ history:
 
 # Translate your Vite and Lit website using Intlayer | Internationalization (i18n)
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-vite-lit-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## Table of Contents
 
 <TOC/>
@@ -41,6 +49,8 @@ With Intlayer, you can:
 
 ---
 
+See [Application Template](https://github.com/aymericzip/intlayer-vite-lit-template) on GitHub.
+
 ## Step-by-Step Guide to Set Up Intlayer in a Vite and Lit Application
 
 ### Step 1: Install Dependencies
@@ -643,63 +653,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-<Tabs>
- <Tab value='Extract command'>
-
-Run the extractor to transform your components and extract the content
-
-```bash packageManager="npm"
-npx intlayer extract
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer extract
-```
-
-```bash packageManager="yarn"
-yarn intlayer extract
-```
-
-```bash packageManager="bun"
-bunx intlayer extract
-```
-
- </Tab>
- <Tab value='Babel compiler'>
-
-Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
-
-```bash packageManager="npm"
-npm run build # Or npm run dev
-```
-
-```bash packageManager="pnpm"
-pnpm run build # Or pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # Or yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # Or bun run dev
-```
-
- </Tab>
-</Tabs>
-
 ### Configure TypeScript
 
 Ensure your TypeScript configuration includes the autogenerated types.

package/docs/en/intlayer_with_vite+vue.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2025-12-30
+updatedAt: 2026-03-24
 title: Vite + Vue i18n - How to translate an Vue app in 2026
 description: Discover how to make your Vite and Vue website multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
@@ -17,6 +17,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-vite-vue-template
 youtubeVideo: https://www.youtube.com/watch?v=IE3XWkZ6a5U
 history:
+  - version: 8.5.0
+    date: 2026-03-24
+    changes: Change installIntlayer by use(intlayer)
   - version: 7.5.9
     date: 2025-12-30
     changes: "Add init command"
@@ -404,19 +407,26 @@ To utilize Intlayer's internationalization features throughout your Vue applicat
 
 ```javascript fileName=main.js
 import { createApp } from "vue";
-import { installIntlayer } from "vue-intlayer";
+import { intlayer } from "vue-intlayer";
 import App from "./App.vue";
 import "./style.css";
 
 const app = createApp(App);
 
 // Inject the provider at the top level
-installIntlayer(app);
+app.use(intlayer);
 
 // Mount the app
 app.mount("#app");
 ```
 
+> You can also call `installIntlayer(app)` directly as a function if you prefer:
+>
+> ```javascript
+> import { intlayer } from "vue-intlayer";
+> app.use(intlayer);
+> ```
+
 Access your content dictionaries throughout your application by creating a main Vue component and using the `useIntlayer` composables:
 
 ```vue fileName="src/HelloWord.vue"

package/docs/en-GB/dictionary/html.md

@@ -19,6 +19,12 @@ slugs:
   - content
   - html
 history:
+  - version: 8.5.0
+    date: 2026-03-24
+    changes: "Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
+  - version: 8.5.0
+    date: 2026-03-24
+    changes: "move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/html`"
   - version: 8.0.0
     date: 2026-01-22
     changes: "Add HTMLRenderer / useHTMLRenderer / renderHTML utility"
@@ -260,13 +266,14 @@ You can configure HTML rendering globally for your entire application. This is i
   
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
-    import { installIntlayer, installIntlayerHTML } from "vue-intlayer";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerHTML } from "vue-intlayer/html";
     import App from "./App.vue";
 
     const app = createApp(App);
 
-    app.use(installIntlayer);
-    app.use(installIntlayerHTML, {
+    app.use(intlayer);
+    app.use(intlayerHTML, {
       components: {
         p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),
         CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),

package/docs/en-GB/dictionary/markdown.md

@@ -17,6 +17,12 @@ slugs:
   - content
   - markdown
 history:
+  - version: 8.5.0
+    date: 2026-03-24
+    changes: "Add `intlayerMarkdown` plugin object; use `app.use(intlayerMarkdown)` instead of `app.use(installIntlayerMarkdown)`"
+  - version: 8.5.0
+    date: 2026-03-24
+    changes: "move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/markdown`"
   - version: 8.0.0
     date: 2026-01-22
     changes: "Add MarkdownRenderer / useMarkdownRenderer / renderMarkdown utility and forceInline option"
@@ -90,7 +96,7 @@ You can declare Markdown content using the `md` function or simply as a string (
 
 ---
 
-## Part 2: Rendering Markdown
+## Rendering Markdown
 
 Rendering can be handled automatically by Intlayer's content system or manually using specialised tools.
 
@@ -387,8 +393,6 @@ You can configure Markdown rendering globally for your entire application. This
 
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
           a: ({ href, children }) => <Link to={href}>{children}</Link>,
@@ -404,20 +408,20 @@ You can configure Markdown rendering globally for your entire application. This
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
-    import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerMarkdown } from "vue-intlayer/markdown";
     import App from "./App.vue";
 
     const app = createApp(App);
 
-    app.use(installIntlayer);
-    app.use(installIntlayerMarkdown, {
-      forceBlock: true,
-      tagfilter: true,
+    app.use(intlayer);
+    app.use(intlayerMarkdown, {
       components: {
-        h1: {
-          component: "h1",
-          props: { class: "text-2xl font-bold" },
-        },
+        h1: (props) =>
+        h('h1', { style: { color: 'orange' }, ...props }, props.children),
+        ComponentDemo: () => h('div', { style: { background: 'grey' } }, 'DEMO'),
+        bold: (props) => h('strong', props),
+        code: (props) => h('code', props),
       },
     });
 
@@ -434,8 +438,6 @@ You can configure Markdown rendering globally for your entire application. This
     </script>
 
     <MarkdownProvider
-      forceBlock={true}
-      tagfilter={true}
       components={{
         h1: MyHeading,
       }}
@@ -452,8 +454,6 @@ You can configure Markdown rendering globally for your entire application. This
 
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
         }}
@@ -471,8 +471,6 @@ You can configure Markdown rendering globally for your entire application. This
 
     export const AppProvider = (props) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,
         }}