Search code examples
vue.jsinternationalizationquasar-frameworkquasarvue-i18n

Quasar: Access $t inside Composition API with Single-File Components

In the quasar docs the following example is suggested to make translations inside a SFC script:

<script>
export default {
  data() {
    return {
      content: this.$t('mykey3')
    }
  }
}
</script>

However, I am wondering how to get access to $t from inside a script using Composition API with Single-File Components within a <script setup> tag.

<script lang="ts" setup>
import { ref } from 'vue'

const example = ref($t('fldldf'))
</script>

The above example ends in:

Uncaught (in promise) ReferenceError: $t is not defined
Solution

  • You could make use of the useI18n composable function to get the t function:

    <script lang="ts" setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const example = ref(t('fldldf'))
</script>

    Reference: https://vue-i18n.intlify.dev/api/composition.html#usei18n