Vue Academy · Lesson

Pluralization and Linked Messages

Plural rules @:key|@:key syntax, count-based plural, linked messages with @:path.

Pluralization and Linked Messages is a free Vue Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Counting Is Language-Specific

"1 item" but "5 items" — and other languages have even more forms. Hardcoding plurals leads to awkward strings like "5 item(s)". Vue I18n has built-in pluralization to pick the right form for a count.

Pipe-Separated Plural Forms

Write the forms in one message string separated by the pipe (|) character. For English, two or three forms are typical.

const en = {
  items: "no items | one item | {count} items",
}

Selecting a Plural with a Count

Pass a number as the second argument to t. Vue I18n picks the matching form based on the count.

const { t } = useI18n()

t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"

The Default Plural Rule

With three forms, the rule is: 0 uses the first, 1 uses the second, and anything else uses the third. Two forms collapse 0 and many together.

const en = {
  // two-form version: 0 and N share the plural
  files: "no file | one file | {count} files",
}

The {count} Placeholder

Inside a plural message, the special {count} (or {n}) placeholder is filled with the number you passed, so you can show the figure.

const en = { photos: "no photos | {count} photo | {count} photos" }

t("photos", 3) // "3 photos"

Plurals in Templates

In templates use $t with the count as the second argument, just like in script.

<template>
  <p>{{ $t("items", cartCount) }}</p>
</template>

Combining Count and Named Values

You can pass both a count and named placeholders by giving the count plus an object of values.

const en = { greeting: "Hi {name}, no messages | Hi {name}, {count} messages" }

t("greeting", 2, { named: { name: "Ada" } })
// or per API: t("greeting", { name: "Ada" }, 2)

What Are Linked Messages?

Sometimes one translation should embed another to avoid duplication. Linked messages reference another key with the @: syntax.

const en = {
  brand: "Acme",
  welcome: "Welcome to @:brand",
}

Resolving a Link

When you translate welcome, the @:brand token is replaced by the translated value of brand. Change brand once and every linked message updates.

t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect it

Linking with Nested Keys

Links work with dotted nested keys too. Wrap multi-word references in parentheses when needed.

const en = {
  app: { name: "MyApp" },
  footer: "Thanks for using @:(app.name)",
}

Modifiers on Links

Linked messages support modifiers like @.upper to transform the linked value (upper, lower, capitalize).

const en = {
  brand: "acme",
  banner: "@.upper:brand sale!", // "ACME sale!"
}

Quick Check

Check your understanding of plurals and links.

Recap

You learned plurals and message reuse:

Separate plural forms with |: "no items | one item | {count} items".
Pass a count to t(key, count) to pick the right form.
The {count} placeholder shows the number.
Linked messages reuse another key via @:otherKey (with @:(nested.key) for nested keys).
Modifiers like @.upper transform the linked value.

Frequently asked questions

Is the “Pluralization and Linked Messages” lesson free?

Yes — the full text of “Pluralization and Linked Messages” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Pluralization and Linked Messages”?

Plural rules @:key|@:key syntax, count-based plural, linked messages with @:path. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Pluralization and Linked Messages” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy