v-t directive if not path, support translate the innerText?

[icai]

https://github.com/kazupon/vue-i18n/blob/adb5269e90ff945fda04c35652f826b82dd9cf8d/src/directive.js#L70

demo:

<h5 class="h3" v-t>Pages</h5>

if support that it can improve the code speed.

[masongzhi]

What you want is when v-t directive was empty, it should translate the keypath Pages like v-t="'Pages'"

You should change the following code:

<h5 class="h3">{{$t('Pages')}}</h5>

[icai]

@masongzhi , i know, but i want to support this syntax.

[kleinfreund]

I’m pretty sure this is not feasible. The following would be extremely confusing and complicated to parse correctly.

<h5 v-t>
  Text to translate
  <span>Some more markup</span>
</h5>

The way @masongzhi proposed is correct and works. What’s the use case for supporting a different way of marking translatable content?

[icai]

@kleinfreund only pure text, just an idea.

[allenhwkim]

I used this technique in Angular project, and it's really really helpful when you do code search. FYI, https://codeburst.io/low-verbosity-i18n-with-custom-vue-directives-c303a35c40c7

<form>
  <label v-t>login.username</label>
  <input type="text" v-t:placeholder="'login.user.placeholder'">
  <label v-t>login.password</label>
  <input type="password">
  <button v-t>login.submit</button>
</form>

[crazynds]

I’m pretty sure this is not feasible. The following would be extremely confusing and complicated to parse correctly.

<h5 v-t>
  Text to translate
  <span>Some more markup</span>
</h5>

The way @masongzhi proposed is correct and works. What’s the use case for supporting a different way of marking translatable content?

I also believe that this syntax must be accepted. And the example given is invalidated by the following fact that:

 <h5 v-t='text.translated'>
   <span>Some more markup</span>
</h5>

Does not work perfectly and deletes the span tag internally. But it can be circumvented using another tag:

 <h5>
   <span v-t='text.translated'></span>
   <span>Some more markup</span>
</h5>

I believe that the same thing can be done in the use that was mentioned above

What @icai talked about is that it would be interesting to add the syntax that by adding the empty v-t suffix within an element, it will take its content and translate it as if it were the way. Example below:

  <h5 v-t> 
     title.page.in.path
  </h5>

This code will have the same result as:

   <h5 v-t="'title.page.in.path'"> 
  </h5>

I believe that in the way that is being proposed in this issue it would be much more pleasant to read the code than to see the element tags that are often full of information.

[HendrikJan]

This looks like a feature that angular-translate supports for a long time: angular-translate directive I've used this a lot in Angularjs projects and really like it.

Writing {{ $(' and ') }} adds quite some cognitive load. The same goes for v-t="' and '".

Instead of writing

<span>{{ $('Accept') }}</span>

you can write

<span v-t>Accept</span>

• This syntax makes it look much more like plain html.
• It's much shorter.
• Code-highlighting usually works better (easier readable) this way.
• For complex situations you can always use $t.

I like this proposal.