מחבר:
    נוצר:2026-06-12עדכון אחרון:2026-09-27

    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
    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
    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
    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
    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
    <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
    <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
    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
    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
    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
    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
    const faq2 = useIntlayer("faq", { item: 2 });
// → { question: string; answer: string }

    Single item with explicit locale

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

    Typical use-cases

    • FAQ lists
    • Pricing tiers
    • Carousel / slider slides
    • Step-by-step instructions
    מילון דינמיגרסאות