Agent skill

Vue I18n Skilld

by skilld-dev in skilld-dev/vue-ecosystem-skills

A skill your agent uses when writing or debugging code that imports vue-i18n (Vue 3 internationalization).

MITAuto-check passedFrontend & Design

Install Vue I18n Skilld

skills CLI
$ npx skills add skilld-dev/vue-ecosystem-skills --skill vue-i18n-skilld -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install skilld-dev/vue-ecosystem-skills vue-i18n-skilld --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/skilld-dev/vue-ecosystem-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/vue-i18n-skilld .claude/skills/vue-i18n-skilld && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
vue-i18n-skilld
GitHub stars
181
Token cost
~1.6k tokens
SKILL.md length
527 words
Files
9 (incl. references)
Skills in repo
34
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when writing or debugging code that imports vue-i18n (Vue 3 internationalization).

  • Works in 6 steps: Default to Composition API mode. Pass… → Do not use the v-t directive in new… → tc and $tc no longer exist. Dropped in… → …
  • Debugging code that imports vue-i18n (Vue 3 internationalization)
  • SKILL.md covers Core rules, Setup, Translate in a component and Common tasks, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Vue I18n Skilld is an agent skill from skilld-dev/vue-ecosystem-skills. Use when writing or debugging code that imports vue-i18n (Vue 3 internationalization). Covers createI18n, useI18n, message syntax, i18n-t/i18n-n/i18n-d components, pluralization, datetime and number formatting, TypeScript schemas, lazy loading, bundle optimization, and v10/v11/v12 migration.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including reference files (for example `references/components.md`, `references/composition-api.md` and `references/formats.md`).

It sits in Frontend & Design, covering Internationalization. It works with Vue.js and TypeScript. The repository describes itself as: Agent Skills for the Vue ecosystem, written from current docs, issues, and releases. The licence is MIT.

When your agent uses it

  • Debugging code that imports vue-i18n (Vue 3 internationalization)
  • Tasks that involve Internationalization

Example prompts

  • “/vue-i18n-skilld”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Default to Composition API mode. Pass legacy: false to createI18n and use useI18n(). Legacy API mode (legacy: true, the default) is…
  2. Do not use the v-t directive in new code. Deprecated in v11, removed in v12 (dist/vue-i18n.d.ts:2138). Use t(), $t, or the component.
  3. tc and $tc no longer exist. Dropped in v11; t/$t handle pluralization via the plural option (verified: no tc export in dist/vue-i18n.d.ts).
  4. Interpolation uses {name} syntax. The v8 modulo % syntax was dropped in v10 (https://vue-i18n.intlify.dev/guide/migration/breaking10.html#d…
  5. Messages are compiled at runtime (JIT) by default since v10. For CSP-strict environments or best performance, pre-compile with…
  6. Never interpolate user input into messages rendered with v-html without escapeParameter: true; translate content, do not concatenate HTML.

What it can do on your machine

Read from SKILL.md and the folder at commit c8994af. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript and vue).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • vue-i18n.intlify.dev
    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Vue I18n Skilld loads about 1.6k tokens when it runs, and up to ~6.6k if it reads all its reference files. Until then it costs about 77 tokens; SKILL.md has 527 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~77
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from skilld-dev/vue-ecosystem-skills at commit c8994af, republished under its MIT licence (© skilld-dev). 527 words, ~1,625 tokens.

Download SKILL.mdSave it as .claude/skills/vue-i18n-skilld/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.
name
vue-i18n-skilld
description
Use when writing or debugging code that imports vue-i18n (Vue 3 internationalization). Covers createI18n, useI18n, message syntax, i18n-t/i18n-n/i18n-d components, pluralization, datetime and number formatting, TypeScript schemas, lazy loading, bundle optimization, and v10/v11/v12 migration.

vue-i18n 11.4.12 (Vue 3)

Internationalization plugin for Vue.js.

Core rules

  1. Default to Composition API mode. Pass legacy: false to createI18n and use useI18n(). Legacy API mode (legacy: true, the default) is deprecated in v11 and removed in v12 (dist/vue-i18n.d.ts:1728).
  2. Do not use the v-t directive in new code. Deprecated in v11, removed in v12 (dist/vue-i18n.d.ts:2138). Use t(), $t, or the <i18n-t> component.
  3. tc and $tc no longer exist. Dropped in v11; t/$t handle pluralization via the plural option (verified: no tc export in dist/vue-i18n.d.ts).
  4. Interpolation uses {name} syntax. The v8 modulo % syntax was dropped in v10 (https://vue-i18n.intlify.dev/guide/migration/breaking10.html#drop-modulo-syntax).
  5. Messages are compiled at runtime (JIT) by default since v10. For CSP-strict environments or best performance, pre-compile with @intlify/unplugin-vue-i18n (https://vue-i18n.intlify.dev/guide/advanced/optimization.html).
  6. Never interpolate user input into messages rendered with v-html without escapeParameter: true; translate content, do not concatenate HTML.

Setup

js
// i18n.js
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false, // Composition API mode
  locale: 'ja',
  fallbackLocale: 'en',
  messages: {
    en: { message: { hello: 'hello world' } },
    ja: { message: { hello: 'こんにちは、世界' } }
  }
})

export default i18n
js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

createApp(App).use(i18n).mount('#app')

app.use(i18n) installs the $t/$d/$n/$rt global properties (when globalInjection: true, the default), enables useI18n, and globally registers i18n-t, i18n-d, i18n-n (when globalInstall: true, the default; dist/vue-i18n.d.ts:1810-1822).

Translate in a component

vue
<script setup>
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
</script>

<template>
  <h1>{{ t('message.hello') }}</h1>
  <p>{{ t('greeting', { name: 'Kyoko' }) }}</p>
  <p>{{ $t('message.hello') }}</p><!-- works in templates via globalInjection -->
</template>

Call useI18n() inside setup only. It throws "Must be called at the top of a setup function" otherwise.

Common tasks

Pluralize. Message: 'no apples | one apple | {count} apples' (pipe-separated forms, selected by plural rules for the locale).

js
t('apple', count, { count }) // or t('apple', { count }, choice)

Custom rules: pluralRules on Composer options (Composition), pluralizationRules (Legacy).

Format dates and numbers.

js
const { d, n } = useI18n()
d(new Date(), 'long') // named format from datetimeFormats option, else Intl fallback
n(1234567, 'currency') // named format from numberFormats option

Interpolate components. Use <i18n-t keypath="..." tag="p"> with slot children per placeholder; see components.

Switch locale. locale.value = 'en' from a Composer; also update the document lang attribute and, on SSR, the Accept-Language handling (https://vue-i18n.intlify.dev/guide/advanced/lazy.html).

Lazy load locales. Dynamic import() plus setLocaleMessage / mergeLocaleMessage; see optimization.

Type-safe keys

Augment the global DefineLocaleMessage, DefineDateTimeFormat, DefineNumberFormat interfaces to get key completion and inference in useI18n without generics; see typescript.

Show full SKILL.md (212 more words)Show less

Pitfalls

  • useI18n({ messages: ... }) creates a local scope; without useScope: 'global' local messages do not merge with global ones (https://vue-i18n.intlify.dev/guide/essentials/scope.html).
  • $t in templates requires globalInjection: true in Composition mode (dist/vue-i18n.d.ts:1735-1746).
  • Vue warns about a missing locale message with key fallback to the key itself; configure missing/missingWarn/fallbackWarn to control noise.
  • Linked messages (@:key), literal { }, and @ | in messages need escaping; see message-syntax.
  • Do not import from deep paths such as vue-i18n/dist/* in bundler projects; use the package root so the correct build resolves (package.json:63-83).

Migration status

ChangeVersionAction
Legacy API mode deprecatedv11Move to legacy: false before v12 (dist/vue-i18n.d.ts:1728)
v-t directive deprecatedv11Replace with t()/$t/<i18n-t> (dist/vue-i18n.d.ts:2138)
tc/$tc removedv11Use t/$t plural option
JIT message compilation defaultv10Pre-compile for strict CSP
% named interpolation removedv10Use {name}
$t positional overload changedv10Pass plural via options object

Details: migration.

References

  • composition-api: createI18n, useI18n, Composer members, scopes, locale switching
  • message-syntax: interpolation, pluralization, linked messages, HTML safety
  • components: i18n-t, i18n-n, i18n-d
  • formats: datetime and number formatting, custom format definitions
  • typescript: schema typing, generated locale types
  • optimization: tree shaking flags, pre-compilation, lazy loading, dist files
  • migration: v9, v10, v11 breaking changes and v12 removals
  • legacy-api: Legacy API mode surface still present in v11

Official documentation: https://vue-i18n.intlify.dev/ API reference: https://vue-i18n.intlify.dev/api/general.html Changelog (cited, not copied): https://github.com/intlify/vue-i18n/blob/master/CHANGELOG.md

© skilld-dev, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 8 other files (references) in skills/vue-i18n-skilld of skilld-dev/vue-ecosystem-skills.

  • SKILL.md
  • references/components.md
  • references/composition-api.md
  • references/formats.md
  • references/legacy-api.md
  • references/message-syntax.md
  • references/migration.md
  • references/optimization.md
  • references/typescript.md

Open the folder on GitHubat commit c8994af

Compare with similar skills

Vue I18n Skilld next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Vue I18n Skilld compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Vue I18n Skilld this skillskilld-dev/vue-ecosystem-skills181—~1.6kAutomated safety check: PassMIT
Create Docsvictorgarciaesgi/nuxt-typed-router4132 repos~2.8kAutomated safety check: PassMIT
Localization Toolkitzebbern/claude-code-guide4.7k1 repos~1.3kAutomated safety check: PassMIT
Uni Appsonofmagic/uni-app-tailwindcss-template3362 repos~1kAutomated safety check: PassMIT
Building With Lobe UIlobehub/lobe-ui2.2k—~2kAutomated safety check: PassMIT
QR Codes with qrcode.vuescopewu/qrcode.vue827—~1.3kAutomated safety check: PassMIT

Similar skills

  • Create Docs

    victorgarciaesgi/nuxt-typed-router

    Create complete documentation sites for projects. An agent skill from victorgarciaesgi/nuxt-typed-router.

    413 GitHub starsUsed in 2 repos~2.8k tokens
    Frontend & DesignAuto-check passed
  • Localization Toolkit

    zebbern/claude-code-guide

    This skill should be used when setting up, auditing, or enforcing internationalization/localization in UI codebases (React/TS, i18next or similar, JSON locales), including installing/configuring the…

    4.7k GitHub starsUsed in 1 repo~1.3k tokens
    Frontend & DesignAuto-check passed
  • Uni App

    sonofmagic/uni-app-tailwindcss-template

    Comprehensive skill reference for uni-app cross-platform development framework

    336 GitHub starsUsed in 2 repos~1k tokens
    Frontend & DesignAuto-check passed
  • Building With Lobe UI

    lobehub/lobe-ui

    Build UI with the LobeHub design ecosystem — @lobehub/ui (plus its base-ui, chat, mobile, awesome, brand, mdx, i18n namespaces), @lobehub/icons, @lobehub/charts, @lobehub/fluent-emoji and…

    2.2k GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed
  • QR Codes with qrcode.vue

    scopewu/qrcode.vue

    Renders, styles and downloads QR codes in Vue 3 apps with the qrcode.vue component, covering canvas versus SVG output, embedded logos, gradients and rounded modules.

    827 GitHub stars~1.3k tokensUpdated 24 days ago
    Frontend & DesignAuto-check passed
  • Cross-platform UI styling for MarkerOn Tauri app (macOS WKWebView vs Windows WebView2).

    1.2k GitHub stars~2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from skilld-dev/vue-ecosystem-skills

All 34 skills in this repo
  • Floating UI Vue Skilld

    skilld-dev/vue-ecosystem-skills

    Floating UI for Vue (@floating-ui/vue@2.0.1). An agent skill from skilld-dev/vue-ecosystem-skills.

    181 GitHub stars~1.3k tokensUpdated 16 days ago
    Auto-check passed
  • Formkit Core Skilld

    skilld-dev/vue-ecosystem-skills

    A skill your agent uses whenever writing, debugging, or reviewing code that imports @formkit/core — FormKit's framework-agnostic core (node trees, values, events, hooks, message stores, ledgers…

    181 GitHub stars~2.1k tokensUpdated 16 days ago
    Auto-check passed
  • Pinia Colada Skilld

    skilld-dev/vue-ecosystem-skills

    Data fetching layer for Vue built on Pinia. An agent skill from skilld-dev/vue-ecosystem-skills.

    181 GitHub stars~1.9k tokensUpdated 16 days ago
    Auto-check passed
  • Pinia Skilld

    skilld-dev/vue-ecosystem-skills

    A skill your agent uses when writing, debugging, or refactoring code that imports "pinia", the Vue 3 store library.

    181 GitHub stars~1.5k tokensUpdated 16 days ago
    Auto-check passed
  • Primevue Skilld

    skilld-dev/vue-ecosystem-skills

    A skill your agent uses when writing, debugging, or updating code that imports primevue (PrimeVue v5, UI component library for Vue 3).

    181 GitHub stars~1.9k tokensUpdated 16 days ago
    Auto-check passed
  • Quasar Skilld

    skilld-dev/vue-ecosystem-skills

    Build, configure, and debug apps with the Quasar framework (quasar npm package, v2.33.1).

    181 GitHub stars~1.6k tokensUpdated 16 days ago
    Auto-check passed

Questions about Vue I18n Skilld

What does Vue I18n Skilld do?

A skill your agent uses when writing or debugging code that imports vue-i18n (Vue 3 internationalization). Vue I18n Skilld is an agent skill from skilld-dev/vue-ecosystem-skills. Use when writing or debugging code that imports vue-i18n (Vue 3 internationalization).

When should I use Vue I18n Skilld?

Vue I18n Skilld fits situations like: debugging code that imports vue-i18n (Vue 3 internationalization); tasks that involve Internationalization.

How do I install Vue I18n Skilld in Claude Code?

Run `npx skills add skilld-dev/vue-ecosystem-skills --skill vue-i18n-skilld -a claude-code`. Or copy the skill folder (skills/vue-i18n-skilld in skilld-dev/vue-ecosystem-skills) into .claude/skills/vue-i18n-skilld in your project. Claude Code loads it when a task matches its description.

How do I install Vue I18n Skilld in Codex?

Run `npx skills add skilld-dev/vue-ecosystem-skills --skill vue-i18n-skilld -a codex`. Or copy the skill folder (skills/vue-i18n-skilld in skilld-dev/vue-ecosystem-skills) into .agents/skills/vue-i18n-skilld in your project. Codex loads it when a task matches its description.

Can I use Vue I18n Skilld in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add skilld-dev/vue-ecosystem-skills --skill vue-i18n-skilld -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vue-i18n-skilld, .gemini/skills/vue-i18n-skilld, .github/skills/vue-i18n-skilld and .opencode/skills/vue-i18n-skilld in your project.

What does Vue I18n Skilld need to run?

SKILL.md names no scripts, command-line tools or credentials: Vue I18n Skilld is instructions for the agent only.

Does Vue I18n Skilld access the network?

SKILL.md names 2 domains. As links in the text: vue-i18n.intlify.dev and github.com. This is read from the text; nothing was executed.

Is Vue I18n Skilld safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Vue I18n Skilld use?

Vue I18n Skilld is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Vue I18n Skilld use?

About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5k tokens, read only when the agent opens those files.

What are the alternatives to Vue I18n Skilld?

Skills that share tags, products or a category with Vue I18n Skilld: Create Docs (victorgarciaesgi/nuxt-typed-router, 413 stars), Localization Toolkit (zebbern/claude-code-guide, 4.7k stars), Uni App (sonofmagic/uni-app-tailwindcss-template, 336 stars) and Building With Lobe UI (lobehub/lobe-ui, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Vue I18n Skilld?

skilld-dev (a GitHub organization) maintains it in skilld-dev/vue-ecosystem-skills, which has 181 GitHub stars. The repository holds 34 skills in this directory. The repository was last updated on September 22, 2026.

Source: skilld-dev/vue-ecosystem-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.