\n\n \n ```\n\n \n \n ```svelte fileName=\"FAQ.svelte\"\n \n\n

\n {item.question}\n
{item.answer}
\n

\n ```\n\n \n \n ```tsx fileName=\"FAQ.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n\n export const FAQ = () => {\n const items = useIntlayer(\"faq\"); // { question: string; answer: string }[]\n\n return (\n

\n {item.question}\n
{item.answer}
\n

\n );\n };\n ```\n\n \n \n ```tsx fileName=\"FAQ.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n import { For } from \"solid-js\";\n\n export const FAQ = () => {\n const items = useIntlayer(\"faq\"); // { question: string; answer: string }[]\n\n return (\n

\n {(item) => (\n

\n {item.question}\n

{item.answer}

\n

\n )}\n

\n );\n };\n ```\n\n \n \n ```typescript fileName=\"faq.component.ts\"\n import { Component } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-faq\",\n template: `\n

\n {{ item.question }}\n
{{ item.answer }}
\n

\n `,\n })\n export class FAQComponent {\n items = useIntlayer(\"faq\");\n }\n ```\n\n \n \n ```javascript fileName=\"faq.js\"\n import { useIntlayer } from \"vanilla-intlayer\";\n\n const faq = useIntlayer(\"faq\");\n\n faq.forEach((item) => {\n console.log(item.question);\n console.log(item.answer);\n });\n ```\n\n \n\n\n### Single item by index\n\n```tsx\nconst faq2 = useIntlayer(\"faq\", { item: 2 });\n// → { question: string; answer: string }\n```\n\n### Single item with explicit locale\n\n```tsx\nconst faq2Fr = useIntlayer(\"faq\", { item: 2, locale: \"fr\" });\n```\n\n## Typical use-cases\n\n- FAQ lists\n- Pricing tiers\n- Carousel / slider slides\n- Step-by-step instructions\n","description":"Use the item metadata field in Intlayer content files to build ordered collections of localized items selectable by index at runtime.","url":"https://intlayer.org/doc/concept/collections","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"Collections, Content List, Dynamic Content, Intlayer, Internationalization","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Developers, Content Managers"}}

Author:

Creation:2026-06-12Last update:2026-06-12

Reference this doc to your favorite AI assistantChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Ask your question and get a summary of the document by referencing this page and the AI provider of your choice

Version History

"Release of the collection dictionaries feature"
v9.0.06/12/2026

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Collections

A collection is a set of content files that share the same dictionary key but each declare a different item index. Intlayer merges them into a single ordered list at build time.

Declaring collection items

Each file represents one item. The item field is its position in the list (1-based).

faq.1.content.ts

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

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;

Consuming a collection

All items

FAQ.tsx

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

<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

Copy code

Copy the code to the clipboard

<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

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

import { useIntlayer } from "vanilla-intlayer";const faq = useIntlayer("faq");faq.forEach((item) => {  console.log(item.question);  console.log(item.answer);});

Single item by index

tsx

Copy code

Copy the code to the clipboard

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

Single item with explicit locale

tsx

Copy code

Copy the code to the clipboard

const faq2Fr = useIntlayer("faq", { item: 2, locale: "fr" });

Typical use-cases

FAQ lists
Pricing tiers
Carousel / slider slides
Step-by-step instructions

Dynamic Dictionary Variants