ttag-org / ttag

:orange_book: simple approach for javascript localization
https://ttag.js.org/
MIT License
345 stars 44 forks source link

Vuejs templates #201

Open dy opened 4 years ago

dy commented 4 years ago

What's the right way to use ttag with vue templates? Would be useful to be able to just

<template>
  {{ t`Hello World!` }}
</template>

But for now .vue files are not even taken to consideration.

AlexMost commented 4 years ago

Hi @dy, .vue files were added recently to ttag-cli https://github.com/ttag-org/ttag-cli/pull/93. @eavae probably can help here, because I haven't used ttag and vue still.

dy commented 4 years ago

Ok, I see @eavae's method, it implies passing all strings as data:

<template>
<div id="app">
  <p>{{ messageHello }}</p>
</div>
</template>
<script>
import { t } from "ttag";
export default {
    data() {
        return {
            messageHello: t`Hello World`
        };
    }
};
</script>

which is a bit of overhead, similar to vue-i18n:

<template>
<div id="app">
  <p>{{ $t("message.hello") }}</p>
</div>
</template>

I wonder if there's a way to make vue + ttag as natural as just

<template>
<div id="app">
  <p>{{ t`String to translate` }}</p>
</div>
</template>