Using vue-gettext with vuetify and other components

[duduklein]

I'm trying to use vue-gettext with vuetify. For a button, I used v-translate directive, as in
<v-btn :value="false" v-translate>inactive</v-btn>, which extracts correctly the string "inactive" for translation.

The issue I'm facing is the translation itself. After translating the .po and generating the json file, the string is not translated.

Actually if I switch to <v-btn :value="false"><translate>inactive</translate></v-btn>, it works, but it adds a useless span tag inside the button.

Any suggestion on how to handle this situation?
Thanks in advance

[adambullmer]

We ran into this one too. Looks like the way the slot works is incompatible with the way the directive gets the string to be translated. Vuetify doesn't transclude unknonw directives on the default slot, and this library grabs the innerHTML of the element the directive is placed upon, as it may be desirable to include simple nested html, like links, or formatting elements. If you inspect the button element, you'll see some data attributes showing the msgid, and it contains all the stringified html from the vuetify btn html and it is for this reason the translations don't work.

The extra element is a bummer, but it shouldn't cause you issues. If you're really concerned about it, you could always make a computed property with the translated string and render that instead of the plain text.

<template>
  <v-btn :value="false">{{ btnText }}</v-btn>
</template>
<script>
export default {
  computed: {
    btnText() {
      return this.$gettext('inactive');
    }
  }
}
</script>

An alternative proposal to the library is to maybe add an option to ignore nested html. I'm sure this will affect others who want to translate complex components and not add weight to the DOM structure with elements that aren't essential. Maybe add a ignore-html directive to be the antithesis to render-html. This would only be to solve the difference between source code and rendered components with slots that seem to be something the community at large is having problems with. (#93 and #49 still being open issues)

I imagine it would look something like this:

<template>
  <v-btn :value="false" v-translate ignore-html>inactive</v-btn>
</template>

and the implementation would be to just grab the innerText rather than innerHTML of the component with the directive here. https://github.com/Polyconseil/vue-gettext/blob/master/src/directive.js#L73

[duduklein]

Thanks for your detailed explanation and suggestions. I have actually worked around this issue with computed properties. Whenever I find an issue with the package, I create a computed property. Le mer. 5 févr. 2020 à 07:37, Adam Bullmer <[email protected]> a écrit :

…

We ran into this one too. Looks like the way the slot works is incompatible with the way the directive gets the string to be translated. Vuetify doesn't transclude unknonw directives on the default slot, and this library grabs the innerHTML of the element the directive is placed upon, as it may be desirable to include simple nested html, like links, or formatting elements. If you inspect the button element, you'll see some data attributes showing the msgid, and it contains all the stringified html from the vuetify btn html and it is for this reason the translations don't work. The extra element is a bummer, but it shouldn't cause you issues. If you're really concerned about it, you could always make a computed property with the translated string and render that instead of the plain text. <template> <v-btn :value="false">{{ btnText }}</v-btn> </template><script>export default { computed: { btnText() { return this.$gettext('inactive'); } }}</script> An alternative proposal to the library is to maybe add an option to ignore nested html. I'm sure this will affect others who want to translate complex components and not add weight to the DOM structure with elements that aren't essential. Maybe add a ignore-html directive to be the antithesis to render-html. This would only be to solve the difference between source code and rendered components with slots that seem to be something the community at large is having problems with. (#93 <#93> and #49 <#49> still being open issues) I imagine it would look something like this: <template> <v-btn :value="false" v-translate ignore-html>inactive</v-btn> </template> and the implementation would be to just grab the innerText rather than innerHTML of the component with the directive here. https://github.com/Polyconseil/vue-gettext/blob/master/src/directive.js#L73 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#104?email_source=notifications&email_token=AATFLILTYEH5RD7HHMV6GSTRBJNC7A5CNFSM4KB72WQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEK2KGJI#issuecomment-582263589>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AATFLILTEIMFT3BQWVZHQ4DRBJNC7ANCNFSM4KB72WQA> .