Translations in TypeScript Part of a Component

[sub9]

Hi,

i am fairly new to Quasar and just starting to dive into the details - I am using Quasar v2 with vue3 and TypeScript support enabled.

I just wrote my first component and cannot translate inside the <script lang=“ts”></script> block of it. I get a ‘this is undefined’ error.

It works fine in the <template></template> block. I followed the offical documentation.

Does anyone know how to enable translation inside typescript blocks?

<template>
  <h1>{{ $t(testString1) }}</h1>
  <h2>{{ testString2 }}</h2>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const testString1 = 'Hello World!';
    const testString2 = this.$t('Hello World!');
    return {
      testString1,
      testString2,
    };
  },
});
</script>

[s.molinari]

Um, I’m just getting up to speed on all of Vue3, but AFAIK, this isn’t available anymore within the setup method. I think you might be looking at old docs for vue-i18n?

Check this out: https://vue-i18n-next.intlify.dev/guide/advanced/composition.html

Scott

[s.molinari]

Also, not sure, but I don’t believe you need defineComponent in an SFC either. Anyone with more experience do jump in and correct me, if I am wrong.

Scott

[sub9]

@s-molinari Thanks for your help!

You need defineComponent if you are using TypeScript (https://v3.vuejs.org/guide/typescript-support.html#project-creation).

What I did now, I imported i18n from my boot file i18n.ts. Now I can use i18n.global.t as a function. I am still not sure this is the right way…

<template>
  <div>
    <h1>{{ $t(testString1) }}</h1>
  </div>
  <div>
    <h2>{{ testString2 }}</h2>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { i18n } from '../boot/i18n';
export default defineComponent({
  setup() {
    const testString1 = 'Hello World!';
    const testString2 = i18n.global.t('Hello World!');
    return {
      testString1,
      testString2,
    };
  },
});
</script>

[s.molinari]

@sub9 - Read the docs again. It’s when you use the options API, is when you need the defineComponent method.

What I did now, I imported i18n from my boot file i18n.ts. Now I can use i18n.global.t as a function. I am still not sure this is the right way…

It’s not.

Scott

[sub9]

@s-molinari Thanks again!

I will read again and try to figure it out.