@yapyak/vue

What is yapyak?

yapyak is an i18n compiler with a small runtime, built for the way code gets written today: rapidly, often with help from a coding agent, and rarely pausing for a separate translation step.

It's a Vite plugin. Works with React, Vue, Svelte, and Astro. SSR is supported on Astro, Nuxt, React Router, SvelteKit, and TanStack Start.

The runtime has no dependencies, built on the platform's Intl API. About 5 KB gzipped for typical use, zero for fixed-locale builds.

import { t } from 'yapyak';

<button>{t('Save changes')}</button>

Save the file, and yapyak adds the string to your locale files. Connect a model and it fills in the translation in the background. Here's locales/sv.json:

{
  "src/components/save-button.tsx": {
    "Save changes": "Spara ändringar"
  }
}

For full documentation, visit yapyak.dev. For working examples, see examples/.

[!TIP] yapyak ships a VS Code extension, also on Open VSX for Cursor and the other forks. It highlights the ICU where you write it, shows every locale on hover, marks a misspelled placeholder with a red squiggle and a quick fix, and lets the model translate a locale file without leaving the editor.

[!TIP] There is also an agent skill for Claude Code, Codex, Cursor, and other coding agents. It teaches the agent all of yapyak and is updated with every release. Install it with npx skills add yapyak/yapyak, or in Claude Code as a plugin with /plugin install yapyak --marketplace yapyak/yapyak.

Demo

Features

• Source string is the key. Write t('Save changes'). There are no separate names to invent.
• AI translation on save. New strings are translated in the background as you work, and show up in the browser right away.
• Context-aware AI translation. Because yapyak is a compiler, it sends the model the code around each string, so it translates a button as a button. Set a glossary and a tone, and it learns the rest from your existing translations.
• Bring your own AI. Or none. Anthropic, OpenAI, Gemini, Ollama, and Claude Code are built in. Write your own, or skip AI and fill the JSON by hand.
• Refactor freely. Move or rename files and the translations come with them. yapyak won't drop a translation you still use.
• Paranoid by default. Missing values are caught as you type, every locale is checked on save, and the browser warns you in development. Numbered diagnostics, YAP0001 and up, each with a page that explains the fix.
• Production-ready i18n. Plurals, selects, ordinals, dates, numbers, lists, and rich text that renders your own components. There's also a format helper for values outside a message.
• Compiled in. Choose how much. Translations ship inside the code that uses them and split along your routes. Build for one locale and there's no runtime at all.
• Locale switching, handled. Instant, with nothing to load. Keep the choice in a cookie or the URL, which work with SSR, or in local storage for a SPA.
• Built for agents. yapyak is designed so an agent can own i18n. It writes t('...') like any string, and gets clear errors early, even in the TypeScript type, so it can fix them right away.
• Your translations, in your repo. yapyak is MIT-licensed and runs on your machine. Translations are JSON files committed with your code, and if you use a model, requests go to its provider with your own key.

Stability

yapyak is pre-1.0: every release is 0.0.x, and any of them may contain breaking changes. Each one is listed in BREAKING.md with migration steps.

Contributing

yapyak is early, and contributions are very welcome.

Bug reports, docs fixes, examples, adapter work, and feedback from real projects all help. If you find yapyak useful, sharing it helps too.

See CONTRIBUTING.md for local setup and how to land a change.

License

MIT