How to use i18n in ts file?

Reporting a bug?

I use i18n in .vue file usually, that is ok. But how can I use it in other typescript file? Such as follow:

<script setup lang="ts">
import { jslook } from './util'
</script>

// util.ts
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

export const jslook = () => {
    console.log(t('message.hello'))
}

I expect the terminal logs right message, but it shows me error:

SyntaxError: Must be called at the top of a `setup` function

Expected behavior

no errors and show messages

Reproduction

I describe it in the bug report

System Info

windows,chrome

Screenshot

No response

Additional context

Maybe I didn’t find it in documents, if you know, please show me, thanks!

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.

[pommedepain]

@cboseck in the config file where you setup your i18n config, get what createI18n returns in a variable and then export it that way :

import { createI18n } from "vue-i18n";

const i18n = createI18n({
	// Set locale
	locale: "en",

	// Set fallback locale
	fallbackLocale: "fr",

	// Must be set to 'false', to use Composition API
	legacy: false,

	// Refer a global scope Composer instance of i18n
	globalInjection: true,

	// Set locale messages
	messages,
});

export default i18n;

Then, in your ts file, import the variable from your setup file and use it this way : i18n.global.t("key.of.your.translation")

[kazupon]

From vue-i18n v9, you need to use global of I18n instance that is created createI18n API docs here: https://vue-i18n.intlify.dev/api/general.html#global

In about example, I think lazy-loading example will be helped for you: https://github.com/intlify/vue-i18n-next/blob/master/examples/lazy-loading/vite/src/i18n.ts