[vue3] vue-i18n reports errors in the component that rendered with render() function

[SZD0319]

Reporting a bug?

execute useI18n() in the component that rendered with render() function，it reports the error: Cannot read properties of null (reading '__VUE_I18N_SYMBOL__')

Expected behavior

work normally

Reproduction

Hello.vue

import { useI18n } from "vue-i18n";

const i18n = useI18n();

render function:

import { h, render } from "vue"
import Hello form "./Hello.vue"

const vnode = h(Hello, {})
render(vnode, document.body)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700
    Memory: 17.40 GB / 31.62 GB
  Binaries:
    Node: 20.16.0 - D:\development\nvm\nodejs\node.EXE
    npm: 10.9.0 - D:\development\nvm\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vitejs/plugin-vue: ^5.0.5 => 5.1.3 
    @vue/eslint-config-prettier: ^9.0.0 => 9.0.0 
    @vue/eslint-config-typescript: ^13.0.0 => 13.0.0 
    @vue/tsconfig: ^0.5.1 => 0.5.1 
    vite: ^5.4.11 => 5.4.11 
    vite-plugin-vue-devtools: ^7.3.1 => 7.4.4 
    vue: ^3.5.4 => 3.5.4 
    vue-i18n: ^10.0.4 => 10.0.4 
    vue-router: ^4.3.3 => 4.4.4 
    vue-tsc: ^2.0.21 => 2.1.6

Screenshot

No response

Additional context

No response

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 Discussions

[kazupon]

Thank you for your reporting!

vue-i18n need to install as plugin
We do not support the use of code like the one you have shown.

Thanks!

[lanxizhu]

can use i18n.global.t(...) instead of const { t } = useI18n()

i18n.ts:

import { createI18n } from 'vue-i18n';

export const i18n = createI18n({
  // ...
});

export const i18nt = (key: string) => {
  return i18n.global.t(key);
};

helloworld.vue:

<script setup lang="ts">
import { i18nt } from '../i18n';

console.log(i18nt('message.hello'));
</script>

<template>
  <div>{{ i18nt('message.hello') }}</div>
</template>

stackblitz demo

[whl88]

can use i18n.global.t(...) instead of const { t } = useI18n()

i18n.ts:

import { createI18n } from 'vue-i18n';

export const i18n = createI18n({
  // ...
});

export const i18nt = (key: string) => {
  return i18n.global.t(key);
};

helloworld.vue:

<script setup lang="ts">
import { i18nt } from '../i18n';

console.log(i18nt('message.hello'));
</script>

<template>
  <div>{{ i18nt('message.hello') }}</div>
</template>

stackblitz demo

love you !