Extract strings?

[thomthom]

Is there a way to extract the original source strings that this package use? So that one can run an extract script and pass it to translators?

[MattyRad]

I'm not sure I understand the question/goal. The translation strings must be provided to the plugin before it can be used, so you should have the "original source strings" already, no need to extract them.

[thomthom]

What I meant was to extract a list of strings to be translated from the source. This would then be handed to translators. The goal is to automate this process and avoid manually copy+paste which is prone to errors.

At the moment I have a very naive script that makes a regex match for $t() in all my .vue files. I was trying to figure out if there is a more robust way to do this.

[MattyRad]

Oh I see. Personally, I keep a folder i18n in the root js folder, and structure it as such:

main.js

import translations from './i18n/map';
Vue.use(i18n, translations);

map.js

import pt from './pt'
import it from './it'
  
export let locales = [
  {
    value: 'pt',
    name: 'Portuguese',
    native: 'Português'
  },
  {
    value: 'it',
    name: 'Italian',
    native: 'italiano'
  }
]

export default {
  pt, it
}

pt.js

export default {
  'hello world': 'hola mundo',
  ...
  (however many hundreds more strings)
}

^ same with it.js

This way you will have all your language strings in a single language file that can be handed to a translator. It's not perfect, but works pretty well for me.

Does that help you? I don't have any other method of extracting the strings other than keeping them organized from the start. Perhaps when I have time I'll update README to note this organization, because it's pretty useful.

[MattyRad]

Also note that if you have supplied translations for a language, and you attempt to translate a string that does not have a key, a warning will be shown in the browser console https://github.com/MattyRad/vue-i18n/blob/master/test/unit/main.spec.js#L94. I also forgot to mention that in the README

[MattyRad]

But yeah, as far as integrating this plugin with an existing codebase with a large amount of HTML, I don't have a good solution for you other than brute force copy/paste tedium. When I implemented my plugin, it was an incredibly tedious exercise of going through each file, using syntax highlighting to find whole strings, and copy/paste them into the respective language file, and wrap the string in $t. I'm sure I used helpful search/replace tools along with way, but it still sucked. Sorry! 😄

[thomthom]

Yea, I noticed the warnings the other say. Nice little detail. (Can it be turned off for production?)

The project I'm working on right now uses a mix of Ruby, HTML and JS. (controlling an embedded web-browser from Ruby basically). And in the past I've done manual copy+paste - but I found I often forget some.

My initial attempt at automated string extraction was with regex, but it quickly got messy when you needed to handle single vs double quotes with the possibility of quotes within. Then multi-line strings etc...

So I dug deeper and found that for both Ruby and JS I could use available parser libraries that let me traverse the AST and extract strings reliable from that. For HTML I used an HTML parser where I extracted text from any element with a given class.

But, having discovered Vue I wanted to refactor my HTML+JS source to use that. So then I tried to find a way to Parse .vue files - but without much luck. The parser vue-loader users is large and unwieldy.

So I'm back to regex -for the moment. Just wanted to check if there was some feature or tool I had missed.

[pixari]

Hi!
I do understand your needing, @thomthom.
I'm also using vuei18n and I need some tool to handle the localization files/entries.

Currently I’m writing a small and simple script to manage it with static analysis, you can find it here: https://github.com/pixari/vue-i18n-extract

My goal is to have something that analyses code statically for key usages in order to:

• Report keys that are missing in the language files
• Report unused keys in the language files
• Add automatically missing keys in the language files
• Remove automatically missing keys in the language files
• Report duplicated keys

Feel free to have a look and give feedbacks :)

[thomthom]

Nice. I'll have a closer look at it later this year. I got another project in the works that will need this.