Allow import i18n-t tag as es module

[santiagoarizti]

Hi, thanks for the awesome project.

I am using the v9 of vue-i18n with vue3

I am having issues with my IDE (phpstorm) recognizing the component i18n-t in my vue SFCs (single file components)

It would be of great help for the IDE (and therefore for the developer experience), to be able to import the component along the useI18n composable. This would greatly improve autocomplete and intellisense in the ide.

This is how I would import the component:

<script>
// the second import here is the component
import {useI18n, I18nT} from 'vue-i18n';

export default {
  components: {
    'i18n-t': I18nT, // note that in <script setup> this line is not necessary
  },
}
</script>
<template>
  <i18n-t keypath="hello">
    <strong>world</strong>
  </i18n-t>
</template>

This works fine today without need for the import, but my ide marks this as a warning

I could add this tag as "ignored tags" in phpstorm

But I don't get any intellisense/help from the IDE about props for the tag i18n-t

What are your thoughts? is there any other way to make the IDE help me with this tag?

[santiagoarizti]

ok, I found a simple solution, I implemented "@web-types"

this is the web-types.json file as I left it

{
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
  "framework": "vue",
  "name": "vue-i18n",
  "version": "9.1.9",
  "contributions": {
    "html": {
      "types-syntax": "typescript",
      "description-markup": "markdown",
      "tags": [
        {
          "name": "I18nT",
          "description": "built-in component from vue-i18n",
          "doc-url": "https://vue-i18n.intlify.dev/",
          "attributes": [
            {
              "name": "plural",
              "description": "Determines if use count 0, 1 or many",
              "default": "'0'",
              "value": {
                "kind": "expression",
                "type": "string"
              }
            },
            {
              "name": "keypath",
              "description": "The ident of the lang to be used",
              "default": "'santi'",
              "value": {
                "kind": "expression",
                "type": "string"
              }
            }
          ],
          "slots": [
            {
              "name": "default",
              "description": "interpolated string"
            }
          ]
        }
      ]
    }
  }
}

And in my package.json file I added this to point to my custom web-types.json

Note: I had to reboot phpstorm for this to work.

And according to the official documentation, you can include this in your own npm package. I will add this as a feature request in "issues"

[santiagoarizti]

Issue created #874

[TwT-L]

Why can you import I18nT from vue-i18n ?
I got Uncaught SyntaxError
vue-i18n does not provide an export named I18nT