Nuxt组合式函数丢失上下文及RouterLink渲染异常问题

问题现象 #

• 调用useMessage传入包含RouterLink的参数时，RouterLink未被渲染为<a>标签
• 在h函数渲染的组件内调用useRoute、useRouter等Nuxt组合式函数时，报错cannot read properties of undefined reading $nuxt

核心原因：直接手动调用render函数挂载组件时，未关联Nuxt的应用上下文，导致路由组件无法被正确处理、组合式函数无法获取Nuxt实例。

解决方案 #

1. 注入Nuxt应用上下文 #

在useMessage函数中，通过Nuxt提供的useNuxtApp()获取当前应用实例，将其上下文注入到创建的VNode中，让组件能访问到Nuxt的完整上下文环境。

修改后的实现代码：

import { VMessage } from '../components/Message';
import { useNuxtApp, createVNode, render } from '#imports';

export function useMessage (props: IVMessageProps) {
    const nuxtApp = useNuxtApp();
    const { body } = document;
    const VMessageNode = createVNode(VMessage, props);

    // 将Nuxt应用上下文注入到VNode中
    if (nuxtApp._instance?.appContext) {
        VMessageNode.appContext = nuxtApp._instance.appContext;
    }

    VMessageNode.props!.onClose = () => {
        render(null, body);
    };

    render(VMessageNode, body);
}

2. 确保组合式函数调用时机正确 #

useMessage必须在Nuxt的生命周期上下文内调用（比如组件的setup钩子、onMounted等生命周期函数中），不能在纯JS环境（如独立工具函数、页面加载前的全局代码）中调用，否则useNuxtApp()无法获取到有效的应用实例。

效果验证 #

修改后使用原示例代码：

useMessage({
  title: 'hello world',
  theme: 'primary',
  message: h(RouterLink, {to: '/cart'}, 'to cart')
})

• RouterLink会被正确渲染为带路由跳转的<a>标签
• 组件内调用useRoute、useRouter等组合式函数不再报错

内容的提问来源于stack exchange，提问作者Denzel