@intlayer/docs 8.5.0 → 8.5.1

package/docs/pl/dictionary/html.md

@@ -21,6 +21,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: "przeniesienie importu z {{framework}}-intlayer do {{framework}}-intlayer/html"
@@ -284,14 +287,14 @@ Możesz skonfigurować renderowanie HTML globalnie dla całej aplikacji. To idea
   
     ```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?.()),
@@ -305,14 +308,14 @@ Możesz skonfigurować renderowanie HTML globalnie dla całej aplikacji. To idea
 
     ```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/pl/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: "przeniesienie importu z {{framework}}-intlayer do {{framework}}-intlayer/markdown"
@@ -35,7 +38,7 @@ history:
 
 Intlayer obsługuje zawartość tekstu sformatowanego zdefiniowaną za pomocą składni Markdown. Pozwala to na łatwe pisanie i utrzymywanie treści z bogatym formatowaniem, takich jak blogi, artykuły i inne.
 
-## Część 1: Deklarowanie treści Markdown
+## Deklarowanie treści Markdown
 
 Możesz zadeklarować treść Markdown, używając funkcji `md` lub po prostu jako łańcuch znaków (jeśli zawiera składnię Markdown).
 
@@ -94,7 +97,7 @@ Możesz zadeklarować treść Markdown, używając funkcji `md` lub po prostu ja
 
 ---
 
-## Część 2: Renderowanie Markdown
+## Renderowanie Markdown
 
 Renderowaniem można zająć się automatycznie za pomocą systemu treści Intlayer lub ręcznie przy użyciu specjalistycznych narzędzi.
 
@@ -387,8 +390,6 @@ Możesz skonfigurować renderowanie Markdown globalnie dla całej aplikacji. 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>,
@@ -423,21 +424,20 @@ Możesz skonfigurować renderowanie Markdown globalnie dla całej aplikacji. To
 
     ```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),
       },
     });
 
@@ -448,14 +448,14 @@ Możesz skonfigurować renderowanie Markdown globalnie dla całej aplikacji. To
 
     ```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);
@@ -477,8 +477,6 @@ Możesz skonfigurować renderowanie Markdown globalnie dla całej aplikacji. To
     </script>
 
     <MarkdownProvider
-      forceBlock={true}
-      tagfilter={true}
       components={{
         h1: MyHeading,
       }}
@@ -514,8 +512,6 @@ Możesz skonfigurować renderowanie Markdown globalnie dla całej aplikacji. To
 
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
         }}
@@ -552,8 +548,6 @@ Możesz skonfigurować renderowanie Markdown globalnie dla całej aplikacji. To
 
     export const AppProvider = (props) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,
         }}

package/docs/pl/intlayer_with_analog.md

@@ -23,6 +23,14 @@ history:
 
 # Przetłumacz swoją aplikację Analog (Angular) za pomocą Intlayer | Internacjonalizacja (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"
+/>
+
 ## Spis treści
 
 <TOC/>
@@ -42,20 +50,6 @@ Z Intlayer możesz:
 
 ## Przewodnik krok po kroku, jak skonfigurować Intlayer w aplikacji Analog
 
-<Tabs defaultTab="code">
-  <Tab label="Kod" 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 - Jak przeprowadzić internacjonalizację aplikacji za pomocą Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
 Zobacz [Szablon aplikacji](https://github.com/aymericzip/intlayer-analog-template) na GitHubie.
 
 ### Krok 1: Instalacja zależności

package/docs/pl/intlayer_with_vite+lit.md

@@ -24,6 +24,14 @@ history:
 
 # Przetłumacz swoją stronę Vite i Lit za pomocą Intlayer | Internacjonalizacja (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"
+/>
+
 ## Spis treści
 
 <TOC/>
@@ -631,63 +639,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-<Tabs>
- <Tab value='Polecenie Extract'>
-
-Uruchom ekstraktor, aby przekształcić komponenty i wyodrębnić treść
-
-```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='Kompilator Babel'>
-
-Zaktualizuj swój `vite.config.ts`, aby dołączyć wtyczkę `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Dodaje wtyczkę kompilatora
-  ],
-});
-```
-
-```bash packageManager="npm"
-npm run build # Lub npm run dev
-```
-
-```bash packageManager="pnpm"
-pnpm run build # Lub pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # Lub yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # Lub bun run dev
-```
-
- </Tab>
-</Tabs>
-
 ### Konfiguracja TypeScript
 
 Upewnij się, że Twoja konfiguracja TypeScript zawiera automatycznie generowane typy.

package/docs/pl/intlayer_with_vite+vue.md

@@ -454,14 +454,14 @@ Aby wykorzystać funkcje internacjonalizacji Intlayer w całej aplikacji Vue, na
 
 ```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);
 
 // Wstrzyknij providera na najwyższym poziomie
-installIntlayer(app);
+app.use(intlayer);
 
 // Zamontuj aplikację
 app.mount("#app");
@@ -1036,7 +1036,7 @@ import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";
 
 const app = createApp(App);
 
-installIntlayer(app);
+app.use(intlayer);
 
 const md = new MarkdownIt({
   html: true, // zezwól na tagi HTML

package/docs/pt/compiler.md

@@ -207,8 +207,11 @@ const config: IntlayerConfig = {
     output: ({ fileName, extension }) => `./${fileName}${extension}`,
 
     /**
-     * Indica se os componentes devem ser salvos após serem transformados.
-     * Dessa forma, o compilador pode ser executado apenas uma vez para transformar o app e depois removido.
+     * Se deve guardar as componentes após serem transformadas.
+     *
+     * - Se `true`, o compilador reescreverá o arquivo do componente no disco. Portanto, a transformação será permanente, e o compilador pulará a transformação para o próximo processo. Dessa forma, o compilador pode transformar o app, e então pode ser removido.
+     *
+     * - Se `false`, o compilador injetará a chamada da função `useIntlayer()` no código apenas na saída da build, e manterá a base de código original intacta. A transformação será feita apenas em memória.
      */
     saveComponents: false,
 
@@ -287,6 +290,8 @@ As seguintes propriedades podem ser configuradas no bloco `compiler` do seu arqu
   - _Tipo_: `boolean`
   - _Padrão_: `false`
   - _Descrição_: Indica se os componentes devem ser salvos após serem transformados.
+    - Se `true`, o compilador reescreverá o arquivo do componente no disco. A transformação será permanente, e o compilador poderá ser removido.
+    - Se `false`, o compilador injetará a chamada da função `useIntlayer()` no código apenas na saída da build, mantendo a base de código original intacta. A transformação será feita apenas em memória.
 
 ### Preencher traduções ausentes
 

package/docs/pt/configuration.md

@@ -518,7 +518,10 @@ const config: IntlayerConfig = {
 
     /**
      * Se deve guardar as componentes após serem transformadas.
-     * Desta forma, o compilador pode ser executado apenas uma vez para transformar a app e depois ser removido.
+     *
+     * - Se `true`, o compilador reescreverá o arquivo do componente no disco. Portanto, a transformação será permanente, e o compilador pulará a transformação para o próximo processo. Dessa forma, o compilador pode transformar o app, e então pode ser removido.
+     *
+     * - Se `false`, o compilador injetará a chamada da função `useIntlayer()` no código apenas na saída da build, e manterá a base de código original intacta. A transformação será feita apenas em memória.
      */
     saveComponents: false,
 
@@ -932,14 +935,13 @@ Estas definições são para casos de uso avançados e configuração interna do
 
 Configurações que controlam o compilador do Intlayer, que extrai dicionários diretamente das suas componentes.
 
-| Campo                 | Descrição                                                                                                                                                                                                                                                                                                                    | Tipo                                                                                                            | Padrão      | Exemplo                                                                                                                                                  | Nota                                                                                                                                                                                                   |
-| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `enabled`             | Indica se o compilador deve estar ativado para a extração de dicionários.                                                                                                                                                                                                                                                    | `boolean` &#124; <br/> `'build-only'`                                                                           | `true`      | `'build-only'`                                                                                                                                           | `'build-only'` ignora o compilador durante o desenvolvimento para acelerar as builds; executado apenas nos comandos de build.                                                                          |
-| `dictionaryKeyPrefix` | Prefixo para as chaves de dicionário extraídas.                                                                                                                                                                                                                                                                              | `string`                                                                                                        | `''`        | `'meu-prefixo-'`                                                                                                                                         | Adicionado à chave gerada (baseada no nome do ficheiro) para evitar conflitos.                                                                                                                         |
-| `saveComponents`      | Se deve guardar as componentes após serem transformadas.                                                                                                                                                                                                                                                                     | `boolean`                                                                                                       | `false`     |                                                                                                                                                          | • Se `true`, substitui os ficheiros originais pelas versões transformadas.<br/>• O compilador pode ser removido após uma execução.                                                                     |
-| `output`              | Define o caminho para os ficheiros de saída. Substitui `outputDir`. Suporta variáveis de template: `{{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 }` | • Caminhos `./` são resolvidos em relação ao diretório da componente.<br/>• Caminhos `/` em relação à raiz.<br/>• `{{locale}}` ativa a geração por idioma.<br/>• Suporta notação de objeto por idioma. |
-| `noMetadata`          | Se `true`, o compilador omite os metadados do dicionário (chave, wrapper de conteúdo) da saída.                                                                                                                                                                                                                              | `boolean`                                                                                                       | `false`     | `false` → `{"key":"minha-chave","content":{"key":"valor"}}` <br/> `true` → `{"key":"valor"}`                                                             | • Útil para saídas i18next ou ICU MessageFormat JSON.<br/>• Funciona bem com o plugin `loadJSON`.                                                                                                      |
-| `dictionaryKeyPrefix` | Prefixo da chave do dicionário                                                                                                                                                                                                                                                                                               | `string`                                                                                                        | `''`        |                                                                                                                                                          | Adicionar prefixo opcional para as chaves de dicionário extraídas                                                                                                                                      |
+| Campo                 | Descrição                                                                                                                                                                                                                                                                                                                    | Tipo                                                                                                            | Padrão      | Exemplo                                                                                                                                                  | Nota                                                                                                                                                                                                                                                                                                     |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `enabled`             | Indica se o compilador deve estar ativado para a extração de dicionários.                                                                                                                                                                                                                                                    | `boolean` &#124; <br/> `'build-only'`                                                                           | `true`      | `'build-only'`                                                                                                                                           | `'build-only'` ignora o compilador durante o desenvolvimento para acelerar as builds; executado apenas nos comandos de build.                                                                                                                                                                            |
+| `dictionaryKeyPrefix` | Prefixo para as chaves de dicionário extraídas.                                                                                                                                                                                                                                                                              | `string`                                                                                                        | `''`        | `'meu-prefixo-'`                                                                                                                                         | Adicionado à chave gerada (baseada no nome do ficheiro) para evitar conflitos.                                                                                                                                                                                                                           |
+| `saveComponents`      | Indica se os componentes devem ser salvos após serem transformados.                                                                                                                                                                                                                                                          | `boolean`                                                                                                       | `false`     |                                                                                                                                                          | • Se `true`, o compilador reescreverá o arquivo do componente no disco. A transformação será permanente, e o compilador poderá ser removido.<br/>• Se `false`, o compilador injetará a chamada da função `useIntlayer()` no código apenas na saída da build, mantendo a base de código original intacta. |
+| `output`              | Define o caminho para os ficheiros de saída. Substitui `outputDir`. Suporta variáveis de template: `{{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 }` | • Caminhos `./` são resolvidos em relação ao diretório da componente.<br/>• Caminhos `/` em relação à raiz.<br/>• `{{locale}}` ativa a geração por idioma.<br/>• Suporta notação de objeto por idioma.                                                                                                   |
+| `noMetadata`          | Se `true`, o compilador omite os metadados do dicionário (chave, wrapper de conteúdo) da saída.                                                                                                                                                                                                                              | `boolean`                                                                                                       | `false`     | `false` → `{"key":"minha-chave","content":{"key":"valor"}}` <br/> `true` → `{"key":"valor"}`                                                             | • Útil para saídas i18next ou ICU MessageFormat JSON.<br/>• Funciona bem com o plugin `loadJSON`.                                                                                                                                                                                                        |
 
 ---
 

package/docs/pt/dictionary/html.md

@@ -21,6 +21,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: "mover a importação de {{framework}}-intlayer para {{framework}}-intlayer/html"
@@ -284,14 +287,14 @@ Você pode configurar a renderização de HTML globalmente para toda a sua aplic
   
     ```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?.()),
@@ -305,14 +308,14 @@ Você pode configurar a renderização de HTML globalmente para toda a sua aplic
 
     ```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/pt/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: "mover a importação de {{framework}}-intlayer para {{framework}}-intlayer/markdown"
@@ -35,7 +38,7 @@ history:
 
 O Intlayer suporta conteúdo de texto rico definido usando a sintaxe Markdown. Isso permite que você escreva e mantenha facilmente conteúdos com formatação rica, como blogs, artigos e muito mais.
 
-## Parte 1: Declarando Conteúdo Markdown
+## Declarando Conteúdo Markdown
 
 Você pode declarar conteúdo Markdown usando a função `md` ou simplesmente como uma string (se contiver sintaxe Markdown).
 
@@ -94,7 +97,7 @@ Você pode declarar conteúdo Markdown usando a função `md` ou simplesmente co
 
 ---
 
-## Parte 2: Renderização de Markdown
+## Renderização de Markdown
 
 A renderização pode ser feita automaticamente pelo sistema de conteúdo do Intlayer ou manualmente usando ferramentas especializadas.
 
@@ -387,8 +390,6 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
 
     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>,
@@ -423,21 +424,20 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
 
     ```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),
       },
     });
 
@@ -448,14 +448,14 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
 
     ```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);
@@ -477,8 +477,6 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     </script>
 
     <MarkdownProvider
-      forceBlock={true}
-      tagfilter={true}
       components={{
         h1: MyHeading,
       }}
@@ -514,8 +512,6 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
 
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
         }}
@@ -552,8 +548,6 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
 
     export const AppProvider = (props) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,
         }}

package/docs/pt/intlayer_with_analog.md

@@ -23,6 +23,14 @@ history:
 
 # Traduza sua aplicação Analog (Angular) usando Intlayer | Internacionalização (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"
+/>
+
 ## Sumário
 
 <TOC/>
@@ -42,20 +50,6 @@ Com o Intlayer, você pode:
 
 ## Guia Passo a Passo para Configurar o Intlayer em uma Aplicação Analog
 
-<Tabs defaultTab="code">
-  <Tab label="Código" 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 - Como Internacionalizar sua aplicação usando Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
 Veja o [Modelo de Aplicação](https://github.com/aymericzip/intlayer-analog-template) no GitHub.
 
 ### Passo 1: Instalar Dependências

package/docs/pt/intlayer_with_vite+lit.md

@@ -24,6 +24,14 @@ history:
 
 # Traduza o seu website Vite e Lit usando Intlayer | Internacionalização (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"
+/>
+
 ## Tabela de Conteúdos
 
 <TOC/>
@@ -640,63 +648,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-<Tabs>
- <Tab value='Comando Extract'>
-
-Execute o extrator para transformar os seus componentes e extrair o conteúdo
-
-```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='Compilador Babel'>
-
-Atualize o seu `vite.config.ts` para incluir o plugin `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adiciona o plugin do compilador
-  ],
-});
-```
-
-```bash packageManager="npm"
-npm run build # Ou npm run dev
-```
-
-```bash packageManager="pnpm"
-pnpm run build # Ou pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # Ou yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # Ou bun run dev
-```
-
- </Tab>
-</Tabs>
-
 ### Configurar TypeScript
 
 Certifique-se de que a sua configuração TypeScript inclui os tipos autogerados.