Começando a Internacionalizar (i18n) com Intlayer, Vite e Solid

Este pacote está em desenvolvimento. Veja a issue para mais informações. Demonstre seu interesse pelo Intlayer para Solid curtindo a issue

O que é o Intlayer?

Intlayer é uma biblioteca inovadora e open-source de internacionalização (i18n) projetada para simplificar o suporte multilíngue em aplicações web modernas.

Com o Intlayer, você pode:

• Gerenciar traduções facilmente usando dicionários declarativos no nível do componente.
• Localizar dinamicamente metadados, rotas e conteúdo.
• Garantir suporte ao TypeScript com tipos gerados automaticamente, melhorando a autocompletação e a detecção de erros.
• Beneficie de recursos avançados, como detecção e troca dinâmica de localidade.

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

Passo 1: Instalar Dependências

Instale os pacotes necessários usando npm:

npm install intlayer solid-intlayernpm install vite-intlayer --save-dev

• intlayer

• 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.

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

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

Passo 2: Configuração do seu projeto

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

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.

Passo 3: Integre o Intlayer na Sua Configuração do Vite

Adicione o plugin intlayer na sua configuração.

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

O plugin Vite intlayerPlugin() é 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.

Passo 4: Declare Seu Conteúdo

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

import { t, type Dictionary } from "intlayer";const appContent = {  key: "app",  content: {},} satisfies Dictionary;export default appContent;

As suas declarações de conteúdo podem ser definidas em qualquer lugar da sua aplicação assim que forem incluídas no diretório contentDir (por padrão, ./src). E devem corresponder à extensão do ficheiro de declaração de conteúdo (por padrão, .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).

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

Passo 5: Utilize o Intlayer no Seu Código

[por completar]

(Opcional) Passo 6: Alterar o idioma do seu conteúdo

[por completar]

(Opcional) Passo 7: Adicionar Roteamento localizado à sua aplicação

[por completar]

(Opcional) Passo 8: Alterar a URL quando o idioma mudar

[por completar]

(Opcional) Passo 9: Alterar os atributos de idioma e direção do HTML

[por completar]

[por completar]

(Opcional) Passo 10: Criar um Componente de Link Localizado

[por completar]

Configuração do Git

É recomendado ignorar os ficheiros gerados pelo Intlayer. Isto permite evitar que sejam cometidos no seu repositório Git.

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

# Ignorar os ficheiros gerados pelo Intlayer.intlayer

Extensão para VS Code

Para melhorar a sua experiência de desenvolvimento com o Intlayer, pode instalar a extensão oficial Intlayer VS Code Extension.

Instalar a partir do VS Code Marketplace

Esta extensão fornece:

• Autocompletar para chaves de tradução.
• Deteção de erros em tempo real para traduções em falta.
• Pré-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 Mais Longe

Para ir mais longe, pode implementar o editor visual ou externalizar o seu conteúdo usando o CMS.

Histórico do Documento

• 5.5.10 - 2025-06-29: Histórico inicial