Vue 3 composables for Verbaly: a thin layer over the reactive core with per-component cleanup (onScopeDispose).

🚀 Install

pnpm add verbaly @verbaly/vue

// main.ts
import { verbalyPlugin } from '@verbaly/vue';
import { verbaly } from 'virtual:verbaly';

app.use(verbalyPlugin(verbaly));

<script setup>
  import { useT, useLocale } from '@verbaly/vue';
  const t = useT();
  const locale = useLocale(); // writable: locale.value = 'en'
</script>

<template>
  <p>{{ t('inbox', { count: 3 }) }}</p>
</template>

Or skip the keys entirely: write the source text in place and the compiler extracts it, right in your .vue files (script and template):

<template>
  <p>{{ t`Hello ${name}, you have ${count} messages` }}</p>
</template>

✨ Rich text: <Trans>

<script setup>
  import { Trans } from '@verbaly/vue';
  import { h } from 'vue';
  const components = { terms: (c) => h('a', { href: '/terms' }, c) };
</script>

<template>
  <Trans id="agree" :components="components" />
</template>

Whitelisted phrasing tags in a message (<em>, <code>…) render as real elements, same whitelist as data-verbaly-rich (richTags overrides it); unknown tags unwrap to inert text. Named links need no render functions; hrefs come from your code, never from messages (javascript: blocked):

<!-- message: 'Read the <docs>guide</docs>' -->
<Trans id="cta" :links="{ docs: { href: '/docs', target: '_blank', rel: 'noopener' } }" />

📖 Docs: https://verbaly-web.vercel.app/docs/frameworks/vue

⚠️ Early development (0.x): API not stable yet.

License

MIT © Aron Soto