Add VueJS support to wp i18n make-pot

[sourovroy]

Add *.vue file support to wp i18n make-pot

Is there any plan to add VueJS support to wp i18n make-pot? Right now it doesn’t add those strings to pot file which are in *.vue

[swissspidy]

There's an open feature request to allow customizing the list of file extensions. Right now only js and jsx are considered. See #231. But it might also make sense to extend the list of defaults to include more file extensions (e.g. also tsx, ts, etc.)

Do you perhaps have an example .vue file or even a repository that could be used to look into this further?

[sourovroy]

Here is a sample App.vue file.

<template>
  <div>
    <h1>{{ __('VueJS Application', 'sourov-amvc') }}</h1>

    <nav class="sourov-amvc-nav">
      <ul>
        <li><router-link to="/">{{ __('Table', 'sourov-amvc') }}</router-link></li>
        <li><router-link to="/graph">{{ __('Graph', 'sourov-amvc') }}</router-link></li>
        <li><router-link to="/settings">{{ __('Settings', 'sourov-amvc') }}</router-link></li>
      </ul>
    </nav>

    <router-view></router-view>
  </div>
</template>

<script setup>
  const { __ } = wp.i18n;
</script>

[sourovroy]

The command wp i18n make-json also needs the support for extracting *.vue strings from PO files.

[swissspidy]

From what I can see this will probably require something similar to #304, involving the existing VueJsExtractor to extract these function calls from .vue files.

I currently have bandwidth to look into this myself, but any contribution in this area is more than welcome.

The command wp i18n make-json also needs the support for extracting *.vue strings from PO files.

This is covered by #231

[jeni1616]

This is not specifically for wp-cli but if somebody wants a temporary solution, use the Loco Translate plugin to make a POT template, in the Loco plugin setting: "Scan JavaScript files with extensions:" use "ts Vue"

This takes really long to create a POT file but it includes text, maybe you guys can take some help from Loco's source code.

[bilalmalkoc]

Your compiler must create bundled JS. So wp cli can scan bundled JS and extract pot and json file. I am using in vue and all works fine.

// Call functions.
const { __ } = wp.i18n;

export default {
    methods: {
         // Init WordPress i18n function to use in template.
        __,
    }
}

[sourovroy]

Thanks @bilalmalkoc , It is working.