Vue-i18n does not working in setup() block

[Arnon R.]

Reporting a bug?

I am using quasar framework and I am trying to change meta description in App.vue. Actually it is pretty easy to use it: https://quasar.dev/quasar-plugins/meta and it works fine.

But everything is inside a setup block, and when I try to use this.$t I got an error.

Expected behavior

import { useMeta } from "quasar";

export default {
  setup() {
    useMeta({
      title: "Quasar App",
      meta: {
        description: { name: "description", content: this.$t("meta.description") },
      },
    });
  },
};
</script>

Reproduction

https://jsfiddle.net/arnonrdp/e9kxy67o/5/

System Info

System:
    OS: macOS 12.1
    CPU: (8) arm64 Apple M1
    Memory: 204.66 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    npm: 8.1.4 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 97.1.34.81
    Safari: 15.2
  npmPackages:
    @vue/cli-plugin-babel: ~4.5.15 => 4.5.15 
    @vue/cli-plugin-router: ~4.5.15 => 4.5.15 
    @vue/cli-service: ~4.5.15 => 4.5.15 
    @vue/compiler-sfc: ^3.2.29 => 3.2.29 
    vue: ^3.2.29 => 3.2.29 
    vue-axios: ^3.4.0 => 3.4.0 
    vue-cli-plugin-quasar: ~4.0.4 => 4.0.4 
    vue-i18n: ^9.1.7 => 9.1.9 
    vue-router: ^4.0.0-0 => 4.0.12 
    vuex: ^4.0.2 => 4.0.2 
    vuex-persistedstate: ^4.1.0 => 4.1.0

Screenshot

No response

Additional context

Error returned:

Uncaught TypeError: Cannot read properties of undefined (reading '$t')

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion
• The provided reproduction is a minimal reproducible example of the bug.

[kazuya kawaguchi]

Thank you for your reporting.

In the setup function, this is no longer a component instance.
You need to use the Composition API useI18n, which is supported in vue-i18n v9.

Please read docs here:
https://vue-i18n.intlify.dev/guide/advanced/composition.html

By the way, this repo kazupon/vue-i18n is for vue-i18n v8.x.
If you would like to open an issue, please register it here, which is the repo for vue-i18n v9.
https://github.com/intlify/vue-i18n-next

Thanks!

[Hakim Zulkufli]

Hi @kazupon,

V9 only supports Vue 3, is that correct?
Is there any plan to port the Composition API useI18n into V8 as well?

Vue 2.7 now have built-in support for Composition API and <script setup>.

[kazuya kawaguchi]

You can use vue-i18n-bridge on Vue 2 + vue-i18n v8
https://vue-i18n.intlify.dev/guide/migration/vue2.html

[Hakim Zulkufli]

@kazupon Awesome, that's very helpful. Thank you very much!