Como Adicionar Caracteres Especiais em Traduções do i18N

O i18n é uma das ferramentas mais populares para a internacionalização de sites e aplicativos, e em alguns cenários pode ser desafiador resolver problemas específicos de se utilizar o i18n com a ferramenta que você está utilizando.

Se você tentou utilizar algum caractere como @ ou { nos arquivos de tradução do i18n no Vue.js e se deparou com um erro 500, neste artigo você vai entender o porquê isso ocorreu e também vai aprender como resolver esse problema.

O problema de alguns caracteres no I18N

Assim como o React.JS que reserva palavras-chave do HTML como class e for, substituindo esses atributos por className e htmlFor, o mesmo ocorre com o i18n que trata alguns caracteres de forma especial:

Se não trabalharmos da forma correta com esses caracteres, você poderá se deparar com o mesmo erro que eu tive:

Para entendermos o problema, vamos levar em consideração um projeto que segue a seguinte estrutura:

.
├── i18n <-- Pasta contendo configurações do i18n
│   └── locales <--- Pasta contendo os arquivos de traduções do i18n
│       ├── en.json <--- Arquivo de tradução do I18n para o idioma Inglês
│       └── pt-BR.json <--- Arquivo de tradução do I18n para o idioma Português do Brasil

Dentro do arquivo pt-BR.json estão as chaves e valores referentes aos textos traduzidos para o idioma Português do Brasil, e o problema começou quando eu fui adicionar em um dos links do Footer o caractere @:

Caractere Especial	Descrição	Solução
@	Utilizado em URLs, e-mails, etc.	{'@'}
{	Início de um bloco em JSON	{'{'}
}	Fim de um bloco em JSON	{'}'}
$	Utilizado em interpolação de strings	{'$'}
\|	Caractere Pipe	{'\|'}

{
  "footer": {
    "socialMedia": [
      {
        "url": "https://www.youtube.com/@CodigoAoPonto",
        "ariaLabel": "Ir para o canal do Código ao Ponto no Youtube",
        "icon": "mdi:youtube"
      },
      {
        "url": "https://www.instagram.com/codigo_ponto",
        "ariaLabel": "Ir para o Instagram do Código ao Ponto",
        "icon": "mdi:instagram"
      }
    ]
  }
}

A solução

Para resolver esse problema nós teremos que fazer a Literal Interpolation no i18n, onde para usar o caractere @ no arquivo de traduções do i18n nós usaremos o seguinte texto: {'@'}, onde basicamente adicionamos as chaves em volta do caractere especial e também aspas simples.

{
  "footer": {
    "socialMedia": [
      {
        "url": "https://www.youtube.com/{'@'}CodigoAoPonto",
        "ariaLabel": "Ir para o canal do Código ao Ponto no Youtube",
        "icon": "mdi:youtube"
      },
      {
        "url": "https://www.instagram.com/codigo_ponto",
        "ariaLabel": "Ir para o Instagram do Código ao Ponto",
        "icon": "mdi:instagram"
      }
    ]
  }
}

Conclusão

Espero que tenha conseguido te ajudar a resolver esse desafio de utilizar caracteres especiais no i18n com Vue.js, se você ainda tiver dúvidas pode consultar a Documentação Oficial do VueI18n.