---
title: "Como Alternar Dinamicamente o locale do PrimeVue • Gabriel Rosa"
description: "Aprenda a adaptar perfeitamente a sua aplicação PrimeVue a diferentes idiomas."
canonical_url: "https://rosa.sh/pt/blog/how-to-switch-primevue-locale-dynamically"
locale: pt
meta:
  "og:description": "Aprenda a adaptar perfeitamente a sua aplicação PrimeVue a diferentes idiomas."
  "og:image": "https://rosa.sh/_og/d/c_Simple.takumi%2Ctitle_Como%2BAlternar%2BDinamicamente%2Bo%2Blocale%2Bdo%2BPrimeVue%2Cdescription_~QXByZW5kYSBhIGFkYXB0YXIgcGVyZmVpdGFtZW50ZSBhIHN1YSBhcGxpY2HDp8OjbyBQcmltZVZ1ZSBhIGRpZmVyZW50ZXMgaWRpb21hcy4%2Cp_Ii9wdC9ibG9nL2hvdy10by1zd2l0Y2gtcHJpbWV2dWUtbG9jYWxlLWR5bmFtaWNhbGx5Ig%2Cs_6dd8U6oiwLlKCFTy.png"
  "og:image:height": "600"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Como Alternar Dinamicamente o locale do PrimeVue • Gabriel Rosa"
  "twitter:image": "https://rosa.sh/_og/d/c_Simple.takumi%2Ctitle_Como%2BAlternar%2BDinamicamente%2Bo%2Blocale%2Bdo%2BPrimeVue%2Cdescription_~QXByZW5kYSBhIGFkYXB0YXIgcGVyZmVpdGFtZW50ZSBhIHN1YSBhcGxpY2HDp8OjbyBQcmltZVZ1ZSBhIGRpZmVyZW50ZXMgaWRpb21hcy4%2Cp_Ii9wdC9ibG9nL2hvdy10by1zd2l0Y2gtcHJpbWV2dWUtbG9jYWxlLWR5bmFtaWNhbGx5Ig%2Cs_6dd8U6oiwLlKCFTy.png"
---

> Index of every page on this site: [llms.txt](https://rosa.sh/llms.txt)

# Como Alternar Dinamicamente o locale do PrimeVue

Aprenda a adaptar perfeitamente a sua aplicação PrimeVue a diferentes idiomas.

Hoje, enquanto trabalhava em um projeto desenvolvido com o Nuxt.js, deparei-me com a necessidade de implementar a internacionalização (i18n) para suportar os idiomas português e inglês. Para alcançar esse objetivo, integrei o módulo @nuxtjs/i18n, que facilita a localização do aplicativo.

Além disso, o projeto faz uso do nuxt-primevue, um conjunto abrangente de componentes para Nuxt. A fim de proporcionar uma experiência totalmente localizada, foi necessário configurar não apenas a tradução do aplicativo, mas também dos componentes fornecidos pelo PrimeVue.

Felizmente, o PrimeVue já oferece arquivos de localização para vários idiomas em seu repositório oficial, facilitando a integração com diferentes línguas.

[primefaces / primelocale](https://github.com/primefaces/primelocale)

A configuração da internacionalização para o PrimeVue é relativamente simples. No entanto, surgiu um desafio adicional: a necessidade de alterar dinamicamente o idioma do PrimeVue, sem a necessidade de recarregar a página. Enquanto o @nuxtjs/i18n possibilitava essa troca dinâmica de idiomas para o aplicativo, a mesma funcionalidade para o PrimeVue apresentou algumas dificuldades.

Este artigo visa compartilhar os desafios encontrados durante esse processo e fornecer soluções para esses problemas específicos. A abordagem detalhada aqui visa facilitar a implementação bem-sucedida da internacionalização tanto para o aplicativo quanto para os componentes do PrimeVue, permitindo uma experiência de usuário perfeitamente localizada e dinâmica.

---

Um dos primeiros problemas que encontrei estava, na verdade, relacionado ao @nuxtjs/i18n. A configuração do módulo estava inicialmente assim:

*nuxt.config.ts*

```
export default defineNuxtConfig({
  i18n: {
    baseUrl: 'https://example.com/',
    defaultLocale: 'en',
    langDir: 'locales',
    locales: [
      { code: 'en', iso: 'en-US', name: 'English (US)', file: 'en.ts' },
      { code: 'pt', iso: 'pt-BR', name: 'Português (BR)', file: 'pt.ts' },
    ],
  },
})
```

Como você pode perceber, o i18n estava configurado para ler a pasta 'locales', e um dos detalhes desse módulo que eu não sabia é que ele lê e modifica todos os arquivos contidos nessa pasta. Por não estar ciente desse detalhe, coloquei os locales do PrimeVue dentro dessa pasta da seguinte forma:

```
/locales
----/en.ts
----/pt.ts
----/primeEN.ts
----/primePT.ts

```

Desta forma, ao aplicar um desses locales no PrimeVue, o texto dos componentes ficavam da seguinte forma:

*Primevue Component Text*

```
{ "type": 0, "start": 0, "end": 2, "loc": { "start": { "line": 1, "column": 1, "offset": 0 }, "end": { "line": 1, "column": 3, "offset": 2 }, "source": "Fr" }, "body": { "type": 2, "start": 0, "end": 2, "loc": { "start": { "line": 1, "column": 1, "offset": 0 }, "end": { "line": 1, "column": 3, "offset": 2 } }, "items": [ { "type": 3, "start": 0, "end": 2, "loc": { "start": { "line": 1, "column": 1, "offset": 0 }, "end": { "line": 1, "column": 3, "offset": 2 } } } ], "static": "Fr" } }
```

Como mencionado anteriormente, o i18n irá modificar todos os arquivos na pasta "locale", inclusive o locale do PrimeVue. Portanto, a primeira solução é NÃO colocar o locale do PrimeVue na mesma pasta do módulo i18n. No meu caso, optei por colocá-lo na pasta 'utils', para que fosse automaticamente importado quando eu alterasse dinamicamente o locale.

---

O segundo problema ocorreu porque eu não estava chamando o usePrimeVue() no topo do bloco setup, mas sim, dentro de uma função. Resumindo o problema, se o seu código estiver da seguinte forma, você encontrará um erro, pois o usePrimeVue() utiliza o inject() do Vue, que está disponível apenas no topo do bloco setup.

*components/Navbar.vue*

```
<script setup lang="ts">
const { locale, setLocale, t } = useI18n()

function changeLang() {
  const primeConfig = usePrimeVue()
  // Warns [Vue warn]: inject() can only be used inside setup() or functional components.
  // Throws Uncaught Error: PrimeVue is not installed!
  if (locale.value === 'en') {
    setLocale('pt')
    primeConfig.config.locale = primept
  }
  else {
    setLocale('en')
    primeConfig.config.locale = primeen
  }
}
</script>
```

A solução é realizar conforme exemplificado no código abaixo, executando o usePrimeVue no início do bloco setup e atribuindo o seu valor a uma variável que pode ser utilizada posteriormente dentro da função responsável por alterar o idioma. Além disso, é possível aproveitar para modificar o idioma do i18n.

*components/Navbar.vue*

```
<script setup lang="ts">
const { locale, setLocale, t } = useI18n()

const primeConfig = usePrimeVue()

onMounted(() => {
  if (locale.value === 'en')
    primeConfig.config.locale = primeen
  else
    primeConfig.config.locale = primept
})

function changeLang() {
  if (locale.value === 'en') {
    setLocale('pt')
    primeConfig.config.locale = primept
  }
  else {
    setLocale('en')
    primeConfig.config.locale = primeen
  }
}
</script>

<template>
  <button aria-label="Switch Language" @click="changeLang">
    <Icon
      :name="locale === 'pt' ? 'openmoji:flag-brazil' : 'openmoji:flag-united-states'"
      size="24"
    />
  </button>
</template>
```

E voilà, seu código agora estará funcionando perfeitamente, com o idioma sendo alterado dinamicamente, tanto no módulo do i18n quanto no do PrimeVue! 😊

Se você tiver alguma dúvida ou quiser entrar em contato, sinta-se à vontade para me encontrar em qualquer uma das redes sociais listadas abaixo. Muito obrigado por ler!

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://rosa.sh/pt#website","@type":"WebSite","description":"Software Engineer & DevOps","inLanguage":"pt-BR","name":"Gabriel Rosa","url":"https://rosa.sh/pt","publisher":{"@id":"https://rosa.sh/#identity"},"translationOfWork":{"@id":"https://rosa.sh/#website"}},{"@id":"https://rosa.sh/pt/blog/how-to-switch-primevue-locale-dynamically#webpage","@type":"WebPage","description":"Aprenda a adaptar perfeitamente a sua aplicação PrimeVue a diferentes idiomas.","name":"Como Alternar Dinamicamente o locale do PrimeVue","url":"https://rosa.sh/pt/blog/how-to-switch-primevue-locale-dynamically","isPartOf":{"@id":"https://rosa.sh/pt#website"},"potentialAction":[{"@type":"ReadAction","target":["https://rosa.sh/pt/blog/how-to-switch-primevue-locale-dynamically"]}]},{"@id":"https://rosa.sh/#identity","@type":"Person","name":"Gabriel Rosa","url":"https://rosa.sh","sameAs":["https://twitter.com/deth_gr"]}]}
```

## Sitemap

See the full [sitemap](https://rosa.sh/sitemap.md) for all pages.