-
-
Notifications
You must be signed in to change notification settings - Fork 8.9k
Closed
Description
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
Metadata
Metadata
Assignees
Labels
No labels