How to import i18n and $t?

[HendrikJan]

Even though translations work fine, VSCode shows an error when using {{ $t('something') }} like this:

Also I want to use translations inside the <script setup lang="ts"> block.

So I have two questions:

• How can I import $t in some way to make the error go away?
• How can I import $t in some way to use translations in my <script> block?

I'm using @nuxtjs/i18n as described here: https://i18n.nuxtjs.org/setup

[antlionguard]

You can use i18n inside script setup like this:

const { $i18n } = useNuxtApp();

const testVal = $i18n.t('key')

And you should already be able to use it in "template" without making any changes. You just need to set "vue-i18n.d.ts" file for type detection.

Here's my vue-i18n.d.ts file:

import VueI18n from '@nuxtjs/i18n/types';
import {
  Path, Values, Locale
} from 'vue-i18n/types';

/**
  * Overloads VueI18n interface to avoid needing to cast return value to string.
  * @see https://github.com/kazupon/vue-i18n/issues/410
  */
declare module '@nuxtjs/i18n/types' {
  export default class VueI18n {
    t(key: Path, locale: Locale, values?: Values): string;
    // eslint-disable-next-line no-dupe-class-members
    t(key: Path, values?: Values): string;
    tc(key: Path, number?: number): string;
  }
}

declare module 'vue-i18n/types' {
  export default class VueI18n {
    t(key: Path, locale: Locale, values?: Values): string;
    // eslint-disable-next-line no-dupe-class-members
    t(key: Path, values?: Values): string;
    tc(key: Path, number?: number): string;
  }
}

declare module 'vue/types/vue' {
  interface Vue {
    $t: typeof VueI18n.prototype.t;
    $tc: typeof VueI18n.prototype.tc;
  }

  // eslint-disable-next-line no-unused-vars
  interface VueConstructor<V extends Vue = Vue> {
    i18n: typeof VueI18n.prototype;
  }
}

export default VueI18n;