Autor:

Criação:2026-06-12Última atualização:2026-06-12

Referência esta documentação ao seu assistente AI favoritoChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha

Histórico de versões

"Lançamento do recurso de coleções de dicionários"
v9.0.012/06/2026

O conteúdo desta página foi traduzido com uma IA.

Veja a última versão do conteúdo original em inglês

Editar esta documentação

Se você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.

Link do GitHub para a documentação

Copiar

Copiar o Markdown do documento para a área de transferência

Coleções

Uma coleção é um conjunto de arquivos de conteúdo que compartilham a mesma chave de dicionário (key), mas cada um declara um índice de item (item) diferente. O Intlayer os mescla em uma única lista ordenada no momento da compilação.

Declarando itens de coleção

Cada arquivo representa um item. O campo item é a sua posição na lista (baseada em 1).

faq.1.content.ts

Copiar código

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

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "faq",
  item: 1,
  content: {
    question: t({ en: "What is Intlayer?", fr: "Qu'est-ce qu'Intlayer ?" }),
    answer: t({ en: "An i18n toolkit.", fr: "Une boîte à outils i18n." }),
  },
} satisfies Dictionary;

export default dictionary;

faq.2.content.ts

Copiar código

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

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "faq",
  item: 2,
  content: {
    question: t({ en: "Is it free?", fr: "Est-ce gratuit ?" }),
    answer: t({ en: "Yes, open-source.", fr: "Oui, open-source." }),
  },
} satisfies Dictionary;

export default dictionary;

Consumindo uma coleção

Todos os itens

FAQ.tsx

Copiar código

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

import { useIntlayer } from "react-intlayer";

export const FAQ = () => {
const items = useIntlayer("faq"); // { question: string; answer: string }[]

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        <strong>{item.question}</strong>
        <p>{item.answer}</p>
      </li>
    ))}
  </ul>
);
};

FAQ.tsx

Copiar código

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

import { useIntlayer } from "next-intlayer";

export const FAQ = () => {
const items = useIntlayer("faq"); // { question: string; answer: string }[]

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        <strong>{item.question}</strong>
        <p>{item.answer}</p>
      </li>
    ))}
  </ul>
);
};

FAQ.vue

Copiar código

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

<script setup>
import { useIntlayer } from "vue-intlayer";
const items = useIntlayer("faq");
</script>

<template>
<ul>
  <li v-for="(item, index) in items" :key="index">
    <strong>{{ item.question }}</strong>
    <p>{{ item.answer }}</p>
  </li>
</ul>
</template>

FAQ.svelte

Copiar código

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

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const items = useIntlayer("faq");
</script>

<ul>
{#each $items as item}
  <li>
    <strong>{item.question}</strong>
    <p>{item.answer}</p>
  </li>
{/each}
</ul>

FAQ.tsx

Copiar código

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

import { useIntlayer } from "preact-intlayer";

export const FAQ = () => {
const items = useIntlayer("faq"); // { question: string; answer: string }[]

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        <strong>{item.question}</strong>
        <p>{item.answer}</p>
      </li>
    ))}
  </ul>
);
};

FAQ.tsx

Copiar código

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

import { useIntlayer } from "solid-intlayer";
import { For } from "solid-js";

export const FAQ = () => {
const items = useIntlayer("faq"); // { question: string; answer: string }[]

return (
  <ul>
    <For each={items()}>
      {(item) => (
        <li>
          <strong>{item.question}</strong>
          <p>{item.answer}</p>
        </li>
      )}
    </For>
  </ul>
);
};

faq.component.ts

Copiar código

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

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
selector: "app-faq",
template: `
  <ul>
    @for (item of items(); track $index) {
      <li>
        <strong>{{ item.question }}</strong>
        <p>{{ item.answer }}</p>
      </li>
    }
  </ul>
`,
})
export class FAQComponent {
items = useIntlayer("faq");
}

faq.js

Copiar código

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

import { useIntlayer } from "vanilla-intlayer";

const faq = useIntlayer("faq");

faq.forEach((item) => {
console.log(item.question);
console.log(item.answer);
});

Item único por índice

tsx

Copiar código

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

const faq2 = useIntlayer("faq", { item: 2 });
// → { question: string; answer: string }

Item único com localidade explícita

tsx

Copiar código

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

const faq2Pt = useIntlayer("faq", { item: 2, locale: "pt" });

Casos de uso típicos

Listas de FAQ (Perguntas Frequentes)
Níveis de preços
Slides de carrossel / slider
Instruções passo a passo

Arquivo por locale Variantes