@intlayer/docs 8.5.0 → 8.5.1

package/docs/uk/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: "Додано MarkdownRenderer / useMarkdownRenderer / утиліту renderMarkdown та опцію forceInline"
@@ -32,7 +38,7 @@ history:
 
 Intlayer підтримує контент rich text, визначений за допомогою синтаксису Markdown. Це дозволяє легко писати та підтримувати контент із багатим форматуванням, таким як блоги, статті та інше.
 
-## Частина 1: Оголошення контенту Markdown
+## Оголошення контенту Markdown
 
 Ви можете оголосити контент Markdown за допомогою функції `md` або просто як рядок (якщо він містить синтаксис Markdown).
 
@@ -90,7 +96,7 @@ Intlayer підтримує контент rich text, визначений за
 
 ---
 
-## Частина 2: Відтворення Markdown
+## Відтворення Markdown
 
 Відтворення може виконуватися автоматично системою контенту Intlayer або вручну за допомогою спеціалізованих інструментів.
 
@@ -387,8 +393,6 @@ Intlayer підтримує контент rich text, визначений за
 
     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 @@ Intlayer підтримує контент rich text, визначений за
 
     ```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 @@ Intlayer підтримує контент rich text, визначений за
     </script>
 
     <MarkdownProvider
-      forceBlock={true}
-      tagfilter={true}
       components={{
         h1: MyHeading,
       }}
@@ -452,8 +454,6 @@ Intlayer підтримує контент rich text, визначений за
 
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
         }}
@@ -471,8 +471,6 @@ Intlayer підтримує контент rich text, визначений за
 
     export const AppProvider = (props) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,
         }}

package/docs/uk/intlayer_with_analog.md

@@ -23,6 +23,14 @@ history:
 
 # Перекладіть свій додаток Analog (Angular) за допомогою Intlayer | Інтернаціоналізація (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"
+/>
+
 ## Зміст
 
 <TOC/>
@@ -42,20 +50,6 @@ history:
 
 ## Покроковий посібник з налаштування Intlayer у додатку Analog
 
-<Tabs defaultTab="code">
-  <Tab label="Код" 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="Демо CodeSandbox - Як інтернаціоналізувати ваш додаток за допомогою Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
 Дивіться [Шаблон додатка](https://github.com/aymericzip/intlayer-analog-template) на GitHub.
 
 ### Крок 1: Встановлення залежностей

package/docs/uk/intlayer_with_vite+lit.md

@@ -24,6 +24,14 @@ history:
 
 # Перекладіть свій веб-сайт на Vite та Lit за допомогою Intlayer | Інтернаціоналізація (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"
+/>
+
 ## Зміст
 
 <TOC/>
@@ -631,63 +639,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-<Tabs>
- <Tab value='Команда Extract'>
-
-Запустіть екстрактор, щоб трансформувати ваші компоненти та витягнути контент
-
-```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'>
-
-Оновіть ваш `vite.config.ts`, щоб включити плагін `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Додає плагін компілятора
-  ],
-});
-```
-
-```bash packageManager="npm"
-npm run build # Або npm run dev
-```
-
-```bash packageManager="pnpm"
-pnpm run build # Або pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # Або yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # Або bun run dev
-```
-
- </Tab>
-</Tabs>
-
 ### Конфігурація TypeScript
 
 Переконайтеся, що ваша конфігурація TypeScript включає автоматично згенеровані типи.

package/docs/uk/intlayer_with_vite+vue.md

@@ -459,14 +459,14 @@ module.exports = appContent;
 
 ```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);
 
 // Зареєструвати провайдера на верхньому рівні
-installIntlayer(app);
+app.use(intlayer);
 
 // Змонтувати застосунок
 app.mount("#app");
@@ -1041,7 +1041,7 @@ import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";
 
 const app = createApp(App);
 
-installIntlayer(app);
+app.use(intlayer);
 
 const md = new MarkdownIt({
   html: true, // дозволити HTML-теги

package/docs/ur/intlayer_with_vite+lit.md

@@ -24,6 +24,14 @@ history:
 
 # Intlayer کا استعمال کرتے ہوئے اپنی Vite اور Lit ویب سائٹ کا ترجمہ کریں | بین الاقوامی کاری (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"
+/>
+
 ## فہرستِ مواد
 
 <TOC/>
@@ -631,63 +639,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-<Tabs>
- <Tab value='ایکسٹریکٹ کمانڈ'>
-
-اپنے اجزاء کو تبدیل کرنے اور مواد نکالنے کے لیے ایکسٹریکٹر چلائیں
-
-```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='بیبل کمپائلر'>
-
-`intlayerCompiler` پلگ ان شامل کرنے کے لیے اپنا `vite.config.ts` اپ ڈیٹ کریں:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // کمپائلر پلگ ان شامل کرتا ہے
-  ],
-});
-```
-
-```bash packageManager="npm"
-npm run build # یا npm run dev
-```
-
-```bash packageManager="pnpm"
-pnpm run build # یا pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # یا yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # یا bun run dev
-```
-
- </Tab>
-</Tabs>
-
 ### TypeScript کنفیگر کریں
 
 یقینی بنائیں کہ آپ کی TypeScript کنفیگریشن میں خودکار طور پر تیار کردہ اقسام شامل ہیں۔

package/docs/vi/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: "Thêm HTMLRenderer / useHTMLRenderer / tiện ích renderHTML"
@@ -259,13 +265,14 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
   
     ```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/vi/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: "Thêm MarkdownRenderer / useMarkdownRenderer / tiện ích renderMarkdown và tùy chọn forceInline"
@@ -32,7 +38,7 @@ history:
 
 Intlayer hỗ trợ nội dung văn bản đa dạng được định nghĩa bằng cú pháp Markdown. Điều này cho phép bạn dễ dàng viết và duy trì nội dung với định dạng phong phú, chẳng hạn như blog, bài viết, và nhiều hơn nữa.
 
-## Phần 1: Khai báo nội dung Markdown
+## Khai báo nội dung Markdown
 
 Bạn có thể khai báo nội dung Markdown bằng hàm `md` hoặc đơn giản là một chuỗi (nếu nó chứa cú pháp Markdown).
 
@@ -90,7 +96,7 @@ Bạn có thể khai báo nội dung Markdown bằng hàm `md` hoặc đơn gi
 
 ---
 
-## Phần 2: Render Markdown
+## Render Markdown
 
 Việc kết xuất có thể được xử lý tự động bởi hệ thống nội dung của Intlayer hoặc thực hiện thủ công bằng các công cụ chuyên dụng.
 
@@ -387,8 +393,6 @@ Bạn có thể cấu hình cách render Markdown ở mức toàn cục cho toà
 
     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 @@ Bạn có thể cấu hình cách render Markdown ở mức toàn cục cho toà
 
     ```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 @@ Bạn có thể cấu hình cách render Markdown ở mức toàn cục cho toà
     </script>
 
     <MarkdownProvider
-      forceBlock={true}
-      tagfilter={true}
       components={{
         h1: MyHeading,
       }}
@@ -452,8 +454,6 @@ Bạn có thể cấu hình cách render Markdown ở mức toàn cục cho toà
 
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
         }}
@@ -471,8 +471,6 @@ Bạn có thể cấu hình cách render Markdown ở mức toàn cục cho toà
 
     export const AppProvider = (props) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,
         }}

package/docs/vi/intlayer_with_analog.md

@@ -23,6 +23,14 @@ history:
 
 # Dịch ứng dụng Analog (Angular) của bạn bằng Intlayer | Quốc tế hóa (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"
+/>
+
 ## Mục lục
 
 <TOC/>
@@ -42,20 +50,6 @@ Với Intlayer, bạn có thể:
 
 ## Hướng dẫn từng bước để thiết lập Intlayer trong ứng dụng Analog
 
-<Tabs defaultTab="code">
-  <Tab label="Mã nguồn" 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 - Cách quốc tế hóa ứng dụng của bạn bằng Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
 Xem [Mẫu ứng dụng](https://github.com/aymericzip/intlayer-analog-template) trên GitHub.
 
 ### Bước 1: Cài đặt các phụ thuộc

package/docs/vi/intlayer_with_vite+lit.md

@@ -24,6 +24,14 @@ history:
 
 # Dịch trang web Vite và Lit của bạn bằng Intlayer | Quốc tế hóa (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"
+/>
+
 ## Mục lục
 
 <TOC/>
@@ -631,63 +639,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-<Tabs>
- <Tab value='Lệnh Extract'>
-
-Chạy trình trích xuất để chuyển đổi các component của bạn và trích xuất nội dung
-
-```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='Trình biên dịch Babel'>
-
-Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Thêm plugin trình biên dịch
-  ],
-});
-```
-
-```bash packageManager="npm"
-npm run build # Hoặc npm run dev
-```
-
-```bash packageManager="pnpm"
-pnpm run build # Hoặc pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # Hoặc yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # Hoặc bun run dev
-```
-
- </Tab>
-</Tabs>
-
 ### Cấu hình TypeScript
 
 Đảm bảo rằng cấu hình TypeScript của bạn bao gồm các kiểu được tạo tự động.

package/docs/vi/intlayer_with_vite+vue.md

@@ -431,14 +431,14 @@ module.exports = appContent;
 
 ```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);
 
 // Tiêm provider ở cấp cao nhất
-installIntlayer(app);
+app.use(intlayer);
 
 // Gắn ứng dụng
 app.mount("#app");
@@ -1013,7 +1013,7 @@ import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";
 
 const app = createApp(App);
 
-installIntlayer(app);
+app.use(intlayer);
 
 const md = new MarkdownIt({
   html: true, // cho phép thẻ HTML

package/docs/zh/compiler.md

@@ -207,8 +207,11 @@ const config: IntlayerConfig = {
     output: ({ fileName, extension }) => `./${fileName}${extension}`,
 
     /**
-     * 指示转换后是否应保存组件。
-     * 这样，编译器只需运行一次即可转换应用程序，然后即可将其删除。
+     * 指示在转换后是否应保存组件。
+     *
+     * - 如果为 `true`，编译器将重写磁盘中的组件文件。因此转换将是永久性的，编译器将跳过下一次进程的转换。这样，编译器可以在转换应用后被移除。
+     *
+     * - 如果为 `false`，编译器仅在构建输出中将 `useIntlayer()` 函数调用注入代码中，并保持基础代码库不变。转换将仅在内存中进行。
      */
     saveComponents: false,
 
@@ -286,7 +289,9 @@ export default config;
 - **saveComponents**:
   - _类型_: `boolean`
   - _默认值_: `false`
-  - _描述_: 指示转换后是否应保存组件。
+  - _描述_: 指示在转换后是否应保存组件。
+    - 如果为 `true`，编译器将重写磁盘中的组件文件。转换将是永久性的，编译器随后可以被移除。
+    - 如果为 `false`，编译器仅在构建输出中将 `useIntlayer()` 函数调用注入代码中，并保持基础代码库不变。转换将仅在内存中进行。
 
 ### 填充缺失的翻译
 

package/docs/zh/configuration.md

@@ -518,7 +518,10 @@ const config: IntlayerConfig = {
 
     /**
      * 转换组件后是否保存它们。
-     * 这样，可以运行一次编译器来转换应用程序，然后将其删除。
+     *
+     * - 如果为 `true`，编译器将重写磁盘中的组件文件。因此转换将是永久性的，编译器将跳过下一次进程的转换。这样，编译器可以在转换应用后被移除。
+     *
+     * - 如果为 `false`，编译器仅在构建输出中将 `useIntlayer()` 函数调用注入代码中，并保持基础代码库不变。转换将仅在内存中进行。
      */
     saveComponents: false,
 

package/docs/zh/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: "将导入从 {{framework}}-intlayer 移动到 {{framework}}-intlayer/html"
@@ -281,14 +284,14 @@ const myContent = html(
   
     ```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 @@ const myContent = html(
 
     ```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);