[Vuejs]-Tools for extracting strings from .vue files for internationalization

If you are using VS Code, the i18n Ally plugin works very well:

https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally

This plugin can detect hard coded strings, that possibly need translation.

It’s recommended to use some Internationalization framework for that. A good example could be Lingui – a JavaScript library for internalization (i18n) of JavaScript projects, including React, Vue, Node.js, etc.

Lingui is an easy yet powerful internationalization framework. They have recently released a Vue.js Extractor that provides a custom extractor that handles Vue.js files.

Message extraction is an essential step in the internationalization process. It involves analyzing your code and extracting all messages defined in it so that your message catalogs are always up-to-date with the source code. Visit the Message Extraction article to learn how it works in Lingui.

Example of how your vue file might look when localized with Lingui:

<script setup lang="ts">
import { i18n } from "@lingui/core"
i18n._("Setup message")
let x: string | number = 1
</script>

<script lang="ts">
import { defineComponent } from "vue"
import { i18n } from "@lingui/core"

export default defineComponent({
  data() {
    return {
      i18n,
      scriptString: i18n.t("Script message"),
    }
  },
})
</script>

<template>
  {{ (x as number).toFixed(2) }}
  {{ i18n.t({ id: "custom.id", message: "My message" }) }}
  {{
    i18n.t({
        message: "My descriptor message",
        id: "my.message",
        comment: "Message comment",
      })
  }}
  {{ i18n._("id used as message") }}
  {{ i18n.t({ id: "My message without ID and context" }) }}
</template>