Allow import i18n-t tag as es module

[santiagoarizti]

(sorry for posting here, I created the same post in vue-18n-next here)

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?

[dr-erych]

Just found out that the Translation component can be imported like this (it even needs to be done like that if using the composition API with <script setup>):

<template>
  <i18n-t keypath="term1" />
</template>

<script setup>
  import { useI18n, Translation as I18nT } from 'vue-i18n'
</script>

[szulcus]

I get this error:

Type '{ keypath: string; }' is not assignable to type 'ComponentProps<{ name: string; props: { keypath: { type: StringConstructor; required: boolean; }; plural: { type: (StringConstructor | NumberConstructor)[]; validator: (val: any) => boolean; }; } & { ...; }; setup(props: any, context: any): any; }>'.
  Type '{ keypath: string; }' is missing the following properties from type '{ name: string; props: { keypath: { type: StringConstructor; required: boolean; }; plural: { type: (StringConstructor | NumberConstructor)[]; validator: (val: any) => boolean; }; } & { ...; }; setup(props: any, context: any): any; }': name, props, setupts(2322)

What's wrong with that?

[dr-erych]

I ran into the same problem. The Translation object that is exported from vue-i18n needs to get passed to defineComponent so that it gets the intended type. My fix was creating a wrapper component:

src/components/I18n.ts:

import { defineComponent } from 'vue'
import { Translation } from 'vue-i18n'

export default defineComponent(Translation)

... and then using that one instead of directly importing from vue-i18n:

<template>
  <I18nT keypath="term1" />
</template>

<script setup>
  import { useI18n } from 'vue-i18n'
  import I18nT from '@/components/I18nT.ts'
</script>