Traduza seu site Vite e Vue usando Intlayer | Internacionalização (i18n)

Índice

Por que Intlayer em vez de alternativas?

Comparado com soluções principais como vue-i18n ou i18next, Intlayer é uma solução que vem com otimizações integradas como:

Guia Passo a Passo para Configurar o Intlayer em uma Aplicação Vite e Vue

VídeoCódigoDemo

www.youtube.com

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

intlayer-vite-vue-template.vercel.app

Open embedded page in fullscreen

Veja o Modelo de Aplicação no GitHub.

1. 1

   Instalar Dependências

   Instale os pacotes necessários usando npm:

   bash

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   npx intlayer init --interactive
   

   a flag --interactive é opcional. Use intlayer-cli init se você for um agente de IA.

   Este comando detectará seu ambiente e instalará os pacotes necessários. Por exemplo:

   bash

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   npm install intlayer vue-intlayer
   npm install vite-intlayer --save-dev
   

   • intlayer

     O pacote principal que fornece ferramentas de internacionalização para gerenciamento de configuração, tradução, declaração de conteúdo, transpiração e comandos CLI.

   • vue-intlayer O pacote que integra o Intlayer com a aplicação Vue. Ele fornece provedores de contexto e composables para internacionalização em Vue.

   • vite-intlayer Inclui o plugin Vite para integrar o Intlayer com o empacotador Vite, assim como middleware para detectar o idioma preferido do usuário, gerenciar cookies e lidar com redirecionamento de URL.

2. 2

   Configuração do seu projeto

   Crie um arquivo de configuração para configurar os idiomas da sua aplicação:

   intlayer.config.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // Seus outros idiomas
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;
   

   Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamento de middleware, nomes de cookies, a localização e extensão das suas declarações de conteúdo, desabilitar logs do Intlayer no console, e muito mais. Para uma lista completa dos parâmetros disponíveis, consulte a documentação de configuração.

3. 3

   Integre o Intlayer na Sua Configuração do Vite

   Adicione o plugin intlayer na sua configuração.

   vite.config.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [vue(), intlayer()],
   });
   

   O plugin Vite intlayer() é usado para integrar o Intlayer com o Vite. Ele garante a construção dos arquivos de declaração de conteúdo e os monitora no modo de desenvolvimento. Define variáveis de ambiente do Intlayer dentro da aplicação Vite. Além disso, fornece aliases para otimizar o desempenho.

4. 4

   Declare Seu Conteúdo

   Crie e gerencie suas declarações de conteúdo para armazenar traduções:

   src/helloWorld.content.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { t, type Dictionary } from "intlayer";
   
   const helloWorldContent = {
     key: "helloworld",
     content: {
       count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
       edit: t({
         en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
         fr: "Éditez <code>components/HelloWorld.vue</code> e salve para testar HMR",
         es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
       }),
       checkOut: t({ en: "Confira ", fr: "Vérifiez ", es: "Compruebe " }),
       officialStarter: t({
         en: ", o starter oficial Vue + Vite",
         fr: ", le starter officiel Vue + Vite",
         es: ", el starter oficial Vue + Vite",
       }),
       learnMore: t({
         en: "Saiba mais sobre o Suporte IDE para Vue em ",
         fr: "En savoir plus sur le support IDE pour Vue dans le ",
         es: "Aprenda más sobre el soporte IDE para Vue en el ",
       }),
       vueDocs: t({
         en: "Guia de Escalonamento da Documentação Vue",
         fr: "Vue Docs Scaling up Guide",
         es: "Vue Docs Scaling up Guide",
       }),
       readTheDocs: t({
         en: "Click on the Vite and Vue logos to learn more",
         fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",
         es: "Haga clic en los logotipos de Vite y Vue para obtener más información",
         pt: "Clique nos logos do Vite e Vue para saber mais",
       }),
     },
   } satisfies Dictionary;
   
   export default helloWorldContent;
   

   Suas declarações de conteúdo podem ser definidas em qualquer lugar da sua aplicação, desde que estejam incluídas no diretório contentDir (por padrão, ./src). E correspondam à extensão do arquivo de declaração de conteúdo (por padrão, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

   Para mais detalhes, consulte a documentação de declaração de conteúdo.

5. 5

   Utilize o Intlayer no Seu Código

   Para utilizar os recursos de internacionalização do Intlayer em toda a sua aplicação Vue, você primeiro precisa registrar a instância singleton do Intlayer no seu arquivo principal. Esta etapa é crucial, pois fornece o contexto de internacionalização para todos os componentes da sua aplicação, tornando as traduções acessíveis em qualquer lugar da sua árvore de componentes.

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { createApp } from "vue";
   import { intlayer } from "vue-intlayer";
   import App from "./App.vue";
   import "./style.css";
   
   const app = createApp(App);
   
   // Injeta o provedor no nível superior
   app.use(intlayer);
   
   // Monta a aplicação
   app.mount("#app");
   

   Você também pode chamar installIntlayer(app) diretamente como uma função se preferir:

   javascript

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { intlayer } from "vue-intlayer";
   app.use(intlayer);
   

   Acesse seus dicionários de conteúdo em toda a sua aplicação criando um componente Vue principal e utilizando os composables useIntlayer:

   src/HelloWord.vue

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   <script setup lang="ts">
   import { ref } from "vue";
   import { useIntlayer } from "vue-intlayer";
   
   defineProps({
     msg: String,
   });
   
   const {
     count,
     edit,
     checkOut,
     officialStarter,
     learnMore,
     vueDocs,
     readTheDocs,
   } = useIntlayer("helloworld");
   const countRef = ref(0);
   </script>
   
   <template>
     <h1>{{ msg }}</h1>
   
     <div class="card">
       <button type="button" @click="countRef++">
         <count />
         {{ countRef }}
       </button>
       <p v-html="edit"></p>
     </div>
   
     <p>
       <checkOut />
       <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
         >create-vue</a
       >, <officialStarter />
     </p>
     <p>
       <learnMore />
       <a
         href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
         target="_blank"
         ><vueDocs /></a
       >.
     </p>
     <p class="read-the-docs"><readTheDocs /></p>
     <p class="read-the-docs">{{ readTheDocs }}</p>
   </template>
   

   Se sua aplicação já existe, você pode usar o Intlayer Compiler, bem como o comando extract, para transformar milhares de componentes em um segundo.

   Acessando Conteúdo no Intlayer

   O Intlayer oferece diferentes APIs para acessar seu conteúdo:

   • Sintaxe baseada em componentes (recomendada): Use a sintaxe <myContent /> ou <Component :is="myContent" /> para renderizar o conteúdo como um Nó do Intlayer. Isso integra-se perfeitamente com o Editor Visual e o CMS.

   • Sintaxe baseada em string: Use {{ myContent }} para renderizar o conteúdo como texto simples, sem suporte ao Editor Visual.

   • Sintaxe HTML bruta: Use <div v-html="myContent" /> para renderizar o conteúdo como HTML bruto, sem suporte ao Editor Visual.

   • Sintaxe de desestruturação: O composable useIntlayer retorna um Proxy com o conteúdo. Esse proxy pode ser desestruturado para acessar o conteúdo mantendo a reatividade.

     • Use const content = useIntlayer("myContent"); e {{ content.myContent }} / <content.myContent />.
     • Ou use const { myContent } = useIntlayer("myContent"); e {{ myContent }} / <myContent/> para desestruturar o conteúdo.
6. 6

   Alterar o idioma do seu conteúdo

   Opcional

   Para alterar o idioma do seu conteúdo, você pode usar a função setLocale fornecida pelo composable useLocale. Essa função permite definir o locale da aplicação e atualizar o conteúdo de acordo.

   Crie um componente para alternar entre idiomas:

   src/components/LocaleSwitcher.vue

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   <template>
     <div class="locale-switcher">
       <select v-model="selectedLocale" @change="changeLocale">
         <option v-for="loc in availableLocales" :key="loc" :value="loc">
           {{ getLocaleName(loc) }}
         </option>
       </select>
     </div>
   </template>
   
   <script setup lang="ts">
   import { ref, watch } from "vue";
   import { getLocaleName } from "intlayer";
   import { useLocale } from "vue-intlayer";
   
   // Obter informações de localidade e função setLocale
   const { locale, availableLocales, setLocale } = useLocale();
   
   // Rastrear a localidade selecionada com um ref
   const selectedLocale = ref(locale.value);
   
   // Atualizar a localidade quando a seleção mudar
   const changeLocale = () => setLocale(selectedLocale.value);
   
   // Manter selectedLocale sincronizado com o locale global
   watch(
     () => locale.value,
     (newLocale) => {
       selectedLocale.value = newLocale;
     }
   );
   </script>
   

   Então, use este componente no seu App.vue:

   src/App.vue

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   <script setup lang="ts">
   import { useIntlayer } from "vue-intlayer";
   import HelloWorld from "@components/HelloWorld.vue";
   import LocaleSwitcher from "@components/LocaleSwitcher.vue";
   import { ref, watch } from "vue";
   
   const content = useIntlayer("app"); // Criar arquivo de declaração intlayer relacionado
   </script>
   
   <template>
     <div>
       <LocaleSwitcher />
       <a href="https://vite.dev" target="_blank">
         <img src="/vite.svg" class="logo" :alt="content.viteLogo" />
       </a>
       <a href="https://vuejs.org/" target="_blank">
         <img src="./assets/vue.svg" class="logo vue" :alt="content.vueLogo" />
       </a>
     </div>
     <HelloWorld :msg="content.title" />
   </template>
   

7. 7

   Adicione roteamento por localeizado à sua aplicação

   Opcional

   Adicionar roteamento por localeizado em uma aplicação Vue normalmente envolve o uso do Vue Router com prefixos de localidade. Isso cria rotas únicas para cada idioma, o que é útil para SEO e URLs amigáveis para SEO.

   Exemplo:

   plaintext

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   - https://example.com/about
   - https://example.com/es/about
   - https://example.com/fr/about
   

   Primeiro, instale o Vue Router:

   bash

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   npm install vue-router
   npx intlayer init
   

   Então, crie uma configuração de roteador que lide com o roteamento baseado em localidade:

   src/router/index.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import {
     localeFlatMap,
     type Locale,
   } from 'intlayer';
   import { createIntlayerClient } from "vue-intlayer";
   import { createRouter, createWebHistory } from 'vue-router';
   import HomeView from './views/home/HomeView.vue';
   import RootView from './views/root/Root.vue';
   
   /**
    * Declarar as rotas com caminhos e metadados específicos para cada localidade.
    */
   const routes = localeFlatMap(({ urlPrefix, locale }) => [
     {
       path: `${urlPrefix}/`,
       name: `Root-${locale}`,
       component: RootView,
       meta: {
         locale,
       },
     },
     {
       path: `${urlPrefix}/home`,
       name: `Home-${locale}`,
       component: HomeView,
       meta: {
         locale,
       },
     },
   ]);
   
   // Criar a instância do roteador
   export const router = createRouter({
     history: createWebHistory(),
     routes,
   });
   
   // Adicionar guarda de navegação para tratamento de localidade
   router.beforeEach((to, _from, next) => {
     const client = createIntlayerClient();
   
     const metaLocale = to.meta.locale as Locale;
   
     // Reutilizar a localidade definida no meta da rota
     client.setLocale(metaLocale);
     next();
   });
   

   O nome é usado para identificar a rota no roteador. Deve ser único entre todas as rotas para evitar conflitos e garantir a navegação e o link corretos.

   Em seguida, registre o roteador no seu arquivo main.js:

   src/main.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { createApp } from "vue";
   import App from "./App.vue";
   import { router } from "./router";
   import "./style.css";
   
   const app = createApp(App);
   
   // Adicione o roteador ao app
   app.use(router);
   
   // Monte o app
   app.mount("#app");
   

   Em seguida, atualize seu arquivo App.vue para renderizar o componente RouterView. Este componente exibirá o componente correspondente à rota atual.

   src/App.vue

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   <script setup lang="ts">
   import LocaleSwitcher from "@components/LocaleSwitcher.vue";
   </script>
   
   <template>
     <nav>
       <LocaleSwitcher />
     </nav>
     <RouterView />
   </template>
   

   Paralelamente, você também pode usar o intlayerProxy para adicionar roteamento no lado do servidor à sua aplicação. Este plugin detectará automaticamente o idioma atual com base na URL e definirá o cookie de idioma apropriado. Se nenhum idioma for especificado, o plugin determinará o idioma mais adequado com base nas preferências de idioma do navegador do usuário. Se nenhum idioma for detectado, ele redirecionará para o idioma padrão.

   Observe que para usar o intlayerProxy em produção, você precisa mover o pacote vite-intlayer de devDependencies para dependencies.

   Desde o Intlayer v9, intlayerProxy() está agrupado diretamente no plugin intlayer() e ativado por padrão através da opção routing.enableProxy (true por padrão). Registrá-lo separadamente conforme mostrado abaixo agora é opcional — é mantido para compatibilidade com versões anteriores e para configurações que precisam controlar a ordem dos plugins. Defina routing.enableProxy: false para desativar. Veja as notas de lançamento da v9.

   vite.config.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
       vue(),
       intlayer({
         proxy: {
           ignore: (req) => req.url?.startsWith("/api"),
         },
       }),
     ],
   });
   

8. 8

   Alterar a URL quando o idioma mudar

   Opcional

   Para atualizar automaticamente a URL quando o usuário mudar o idioma, você pode modificar o componente LocaleSwitcher para usar o Vue Router:

   src/components/LocaleSwitcher.vue

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   <template>
     <div class="locale-switcher">
       <select v-model="selectedLocale" @change="changeLocale">
         <option v-for="loc in availableLocales" :key="loc" :value="loc">
           {{ getLocaleName(loc) }}
         </option>
       </select>
     </div>
   </template>
   
   <script setup lang="ts">
   // Importa ref e watch do Vue
   import { ref, watch } from "vue";
   // Importa useRouter do Vue Router
   import { useRouter } from "vue-router";
   // Importa Locales, getLocaleName e getLocalizedUrl do intlayer
   import { Locales, getLocaleName, getLocalizedUrl } from "intlayer";
   // Importa useLocale do vue-intlayer
   import { useLocale } from "vue-intlayer";
   
   // Obtém o Vue Router
   const router = useRouter();
   
   // Obtém informações de locale e a função setLocale
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (newLocale) => {
       // Obtém a rota atual e cria uma URL localizada
       const currentPath = router.currentRoute.value.fullPath;
       const localizedPath = getLocalizedUrl(currentPath, newLocale);
   
       // Navega para a rota localizada sem recarregar a página
       router.push(localizedPath);
     },
   });
   
   // Acompanha o locale selecionado com um ref
   const selectedLocale = ref(locale.value);
   
   // Atualize o locale quando a seleção mudar
   const changeLocale = () => {
     setLocale(selectedLocale.value);
   };
   
   // Mantenha o selectedLocale sincronizado com o locale global
   watch(
     () => locale.value,
     (newLocale) => {
       selectedLocale.value = newLocale;
     }
   );
   </script>
   

   Dica: Para melhor SEO e acessibilidade, use tags como <a href="/fr/home" hreflang="fr"> para vincular às páginas localizadas, como mostrado no Passo 10. Isso permite que os motores de busca descubram e indexem corretamente URLs específicas de idioma. Para preservar o comportamento SPA, você pode impedir a navegação padrão com @click.prevent, alterar o locale usando useLocale e navegar programaticamente usando o Vue Router.

   html

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   <ol>
     <li>
       <a
         hreflang="x-default"
         aria-label="Mudar para Inglês"
         target="_self"
         aria-current="page"
         href="/doc/get-started"
       >
         <div>
           <span dir="ltr" lang="en">English</span>
           <span>Inglês</span>
           <span>EN</span>
         </div>
       </a>
     </li>
     <li>
       <a
         hreflang="es"
         aria-label="Mudar para Espanhol"
         target="_self"
         href="/es/doc/get-started"
       >
         <div>
           <span dir="ltr" lang="es">Español</span>
           <span>Espanhol</span>
           <span>ES</span>
         </div>
       </a>
     </li>
   </ol>
   

9. 9

   Alterar os atributos de idioma e direção do HTML

   Opcional

   Quando sua aplicação suporta múltiplos idiomas, é crucial atualizar os atributos lang e dir da tag <html> para corresponder ao locale atual. Fazer isso garante:

   • Acessibilidade: Leitores de tela e tecnologias assistivas dependem do atributo lang correto para pronunciar e interpretar o conteúdo com precisão.
   • Renderização de Texto: O atributo dir (direção) garante que o texto seja exibido na ordem correta (por exemplo, da esquerda para a direita para inglês, da direita para a esquerda para árabe ou hebraico), o que é essencial para a legibilidade.
   • SEO: Motores de busca usam o atributo lang para determinar o idioma da sua página, ajudando a exibir o conteúdo localizado correto nos resultados de pesquisa.

   Ao atualizar esses atributos dinamicamente quando o locale muda, você garante uma experiência consistente e acessível para usuários em todos os idiomas suportados.

   src/composables/useI18nHTMLAttributes.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { watch } from "vue";
   import { useLocale } from "vue-intlayer";
   import { getHTMLTextDir } from "intlayer";
   
   /**
    * Composable que atualiza os atributos `lang` e `dir` do elemento HTML <html>
    * com base na localidade atual.
    *
    * @example
    * // No seu App.vue ou em um componente global
    * import { useI18nHTMLAttributes } from './composables/useI18nHTMLAttributes'
    *
    * useI18nHTMLAttributes()
    */
   export const useI18nHTMLAttributes = () => {
     const { locale } = useLocale();
   
     // Atualiza os atributos HTML sempre que a localidade mudar
     watch(
       () => locale.value,
       (newLocale) => {
         if (!newLocale) return;
   
         // Atualiza o atributo de idioma
         document.documentElement.lang = newLocale;
   
         // Define a direção do texto (ltr para a maioria dos idiomas, rtl para árabe, hebraico, etc.)
         document.documentElement.dir = getHTMLTextDir(newLocale);
       },
       { immediate: true }
     );
   };
   

   Use este composable no seu App.vue ou em um componente global:

   src/App.vue

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   <script setup lang="ts">
   import { useI18nHTMLAttributes } from "@composables/useI18nHTMLAttributes";
   
   // Aplicar os atributos HTML com base na localidade atual
   useI18nHTMLAttributes();
   </script>
   
   <template>
     <!-- Template da sua aplicação -->
   </template>
   

10. 10

    Criando um Componente de Link Localizado

    Opcional

    Para garantir que a navegação da sua aplicação respeite o idioma atual, você pode criar um componente personalizado Link. Este componente adiciona automaticamente o prefixo do idioma atual às URLs internas. Por exemplo, quando um usuário que fala francês clica em um link para a página "Sobre", ele é redirecionado para /fr/about em vez de /about.

    Esse comportamento é útil por várias razões:

    • SEO e Experiência do Usuário: URLs localizadas ajudam os motores de busca a indexar corretamente páginas específicas por idioma e fornecem aos usuários conteúdo no idioma de sua preferência.
    • Consistência: Ao usar um link localizado em toda a sua aplicação, você garante que a navegação permaneça dentro do idioma atual, evitando mudanças inesperadas de idioma.
    • Manutenção: Centralizar a lógica de localização em um único componente simplifica o gerenciamento das URLs, tornando sua base de código mais fácil de manter e expandir conforme sua aplicação cresce.

    src/components/Link.vue

    Copiar conteúdo

    Copiar código

    Copiar o código para a área de transferência

    <template>
      <a :href="localizedHref" v-bind="$attrs">
        <slot />
      </a>
    </template>
    
    <script setup lang="ts">
    import { computed } from "vue";
    import { getLocalizedUrl } from "intlayer";
    import { useLocale } from "vue-intlayer";
    
    const props = defineProps({
      href: {
        type: String,
        required: true,
      },
    });
    
    const { locale } = useLocale();
    
    // Verifica se o link é externo
    const isExternalLink = computed(() => /^https?:\/\//.test(props.href || ""));
    
    // Cria um href localizado para links internos
    const localizedHref = computed(() =>
      isExternalLink.value ? props.href : getLocalizedUrl(props.href, locale.value)
    );
    </script>
    

    Para uso com Vue Router, crie uma versão específica para o roteador:

    src/components/RouterLink.vue

    Copiar conteúdo

    Copiar código

    Copiar o código para a área de transferência

    <template>
      <router-link :to="localizedTo" v-bind="$attrs">
        <slot />
      </router-link>
    </template>
    
    <script setup lang="ts">
    import { computed } from "vue";
    import { getLocalizedUrl } from "intlayer";
    import { useLocale } from "vue-intlayer";
    
    const props = defineProps({
      to: {
        type: [String, Object],
        required: true,
      },
    });
    
    const { locale } = useLocale();
    
    // Cria a propriedade 'to' localizada para router-link
    const localizedTo = computed(() => {
      if (typeof props.to === "string") {
        return getLocalizedUrl(props.to, locale.value);
      } else {
        // Se 'to' for um objeto, localize a propriedade path
        return {
          ...props.to,
          path: getLocalizedUrl(props.to.path ?? "/", locale.value),
        };
      }
    });
    </script>
    

    Use esses componentes na sua aplicação:

    src/App.vue

    Copiar conteúdo

    Copiar código

    Copiar o código para a área de transferência

    <template>
      <div>
        <!-- Vue router  -->
        <RouterLink to="/">Raiz</RouterLink>
        <RouterLink to="/home">Início</RouterLink>
        <!-- Outros -->
        <Link href="/">Raiz</Link>
        <Link href="/home">Início</Link>
      </div>
    </template>
    
    <script setup lang="ts">
    import Link from "@components/Link.vue";
    import RouterLink from "@components/RouterLink.vue";
    </script>
    

11. 11

    Renderizar Markdown

    Opcional

    Se você tiver uma base de código existente, transformar milhares de arquivos pode ser demorado.

    Para facilitar esse processo, o Intlayer propõe um compilador / extrator para transformar seus componentes e extrair o conteúdo.

    Para configurá-lo, você pode adicionar uma seção compiler no seu arquivo intlayer.config.ts:

    intlayer.config.ts

    Copiar conteúdo

    Copiar código

    Copiar o código para a área de transferência

    import { type IntlayerConfig } from "intlayer";
    
    const config: IntlayerConfig = {
      // ... Resto da sua configuração
      compiler: {
        /**
         * Indica se o compilador deve ser ativado.
         */
        enabled: true,
    
        /**
         * Define o caminho dos arquivos de saída
         */
        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 aplicativo e depois removido.
         */
        saveComponents: false,
    
        /**
         * Prefixo da chave do dicionário
         */
        dictionaryKeyPrefix: "",
      },
    };
    
    export default config;
    

    Comando de extraçãoCompilador Babel

    Execute o extrator para transformar seus componentes e extrair o conteúdo

    bash

    Copiar conteúdo

    Copiar código

    Copiar o código para a área de transferência

    npx intlayer extract
    

    Since v9, the intlayerCompiler is included in the intlayer plugin. So you don't need to add it manually.

    Atualize seu vite.config.ts para incluir o plugin intlayerCompiler:

    vite.config.ts

    Copiar conteúdo

    Copiar código

    Copiar o código para a área de transferência

    import { defineConfig } from "vite";
    import { intlayer, intlayerCompiler } from "vite-intlayer";
    
    export default defineConfig({
      plugins: [
        intlayer(),
        intlayerCompiler(), // Adds the compiler plugin
      ],
    });
    

    bash

    Copiar conteúdo

    Copiar código

    Copiar o código para a área de transferência

    npm run build # Ou npm run dev
    

(Opcional) Sitemap e robots.txt (geração no build)

A Intlayer expõe utilitários - generateSitemap e getMultilingualUrls - para formatar um sitemap.xml multilíngue e um robots.txt prontos para crawlers e os gravar automaticamente em public/. Normalmente corre um pequeno script Node antes do Vite (por exemplo hooks npm predev / prebuild) para que os ficheiros existam no build ou no servidor de desenvolvimento.

Sitemap

O gerador de sitemaps da Intlayer respeita as suas línguas e inclui os metadados habituais.

O sitemap suporta o espaço de nomes xhtml:link (hreflang). Em vez de listar apenas URLs soltas, a Intlayer liga de forma bidireccional todas as versões localizadas de cada página (por exemplo /about, /fr/about ou /about?lang=fr consoante o modo de rotas).

Robots.txt

Use getMultilingualUrls para que as regras Disallow cubram todas as variantes localizadas de caminhos sensíveis.

1. Criar generate-seo.mjs na raiz do projeto

import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";
import { generateSitemap, getMultilingualUrls } from "intlayer";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(
  /\/$/,
  ""
);

const pathList = [
  { path: "/", changefreq: "daily", priority: 1.0 },
  { path: "/about", changefreq: "monthly", priority: 0.7 },
];

const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);

const getAllMultilingualUrls = (urls) =>
  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));

const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);

const robotsTxt = [
  "User-agent: *",
  "Allow: /",
  ...disallowedPaths.map((path) => `Disallow: ${path}`),
  "",
  `Sitemap: ${SITE_URL}/sitemap.xml`,
].join("\n");

fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);

console.log("SEO files generated successfully.");

O pacote intlayer tem de estar instalado. Defina SITE_URL no ambiente em produção (por exemplo na CI).

Prefira generate-seo.mjs para ESM no Node. Se usar generate-seo.js, garanta "type": "module" no package.json ou execute o Node com ESM.

2. Executar o script antes do Vite

{
  "scripts": {
    "dev": "vite",
    "prebuild": "node generate-seo.mjs",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Ajuste os comandos se usar pnpm ou yarn. Também pode invocar o script a partir da CI ou de outro passo do pipeline.

Configurar TypeScript

O Intlayer utiliza a ampliação de módulos para aproveitar os benefícios do TypeScript e tornar sua base de código mais robusta.

Certifique-se de que sua configuração do TypeScript inclua os tipos gerados automaticamente.

{
  // ... Suas configurações existentes do TypeScript
  "include": [
    // ... Suas configurações existentes do TypeScript
    ".intlayer/**/*.ts", // Inclua os tipos gerados automaticamente
  ],
}

Configuração do Git

É recomendado ignorar os arquivos gerados pelo Intlayer. Isso permite que você evite comitá-los no seu repositório Git.

Para isso, você pode adicionar as seguintes instruções ao seu arquivo .gitignore:

#  Ignorar os arquivos gerados pelo Intlayer
.intlayer

Extensão VS Code

Para melhorar sua experiência de desenvolvimento com o Intlayer, você pode instalar a Extensão oficial do Intlayer para VS Code.

Instalar no VS Code Marketplace

Esta extensão oferece:

• Autocompletar para chaves de tradução.
• Detecção de erros em tempo real para traduções ausentes.
• Visualizações inline do conteúdo traduzido.
• Ações rápidas para criar e atualizar traduções facilmente.

Para mais detalhes sobre como usar a extensão, consulte a documentação da Extensão Intlayer para VS Code.

Ir Além

Para ir além, você pode implementar o editor visual ou externalizar seu conteúdo usando o CMS.

Perguntas Frequentes