Vue context not available when using vnode - _ctx.$t is not a function

[martinszeltins]

Vue version

3.5.13

Link to minimal reproduction

https://stackblitz.com/~/github.com/martinszeltins/vue-vnode-context

Steps to reproduce

I created my component using vnode h function from Vue. I passed this component to my toast notification. Everything seems to work, except that I cannot access any Vue context inside my component. I am getting this error:

Uncaught (in promise) TypeError: _ctx.$t is not a function
    at Proxy._sfc_render (AppNotification.vue:5:80)
    at renderComponentRoot (chunk-7VTXWSWY.js?v=c9665c21:8581:17)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-7VTXWSWY.js?v=c9665c21:7403:46)
    at ReactiveEffect.run (chunk-7VTXWSWY.js?v=c9665c21:481:19)
    at setupRenderEffect (chunk-7VTXWSWY.js?v=c9665c21:7538:5)
    at mountComponent (chunk-7VTXWSWY.js?v=c9665c21:7313:7)
    at processComponent (chunk-7VTXWSWY.js?v=c9665c21:7266:9)
    at patch (chunk-7VTXWSWY.js?v=c9665c21:6782:11)
    at mountChildren (chunk-7VTXWSWY.js?v=c9665c21:7014:7)
    at mountElement (chunk-7VTXWSWY.js?v=c9665c21:6937:7)

App.vue

<template>
    <div @click="showNotification" style="cursor: pointer; font-size: 40px; font-weight: bold">
        {{ $t('click_me') }}
    </div>
</template>

<script setup lang="ts">
    import { h } from 'vue'
    import { toast } from 'vue3-toastify'
    import AppNotification from './components/AppNotification.vue'

    const showNotification = () => {
        const vnode = h(AppNotification)
        toast(vnode)
    }
</script>

AppNotification.vue

<template>
    <div>
        <!-- This throws an error: TypeError: _ctx.$t is not a function -->
        {{ $t('i_am_a_notification') }}
    </div>
</template>

What is expected?

I expected it to work.

What is actually happening?

It throws an error.

System Info

`
System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 21.02 GB / 31.05 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.14.2/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
    pnpm: 8.6.12 - ~/.nvm/versions/node/v18.14.2/bin/pnpm
    bun: 1.0.33 - ~/.bun/bin/bun
  Browsers:
    Chrome: 128.0.6613.137
`

Any additional comments?

No response

[edison1105]

I don't think this is a core bug.
Maybe you should do it like below

toast(vnode,{
  $t: xxx
})

[martinszeltins]

no, I want to access translations from inside my AppNotification component not pass anything in as props

[martinszeltins]

@edison1105 how is this not a bug?

[edison1105]

no, I want to access translations from inside my AppNotification component not pass anything in as props

you should file a bug to 'vue3-toastify' first.