Nuxt中组件的async setup函数未被调用的问题排查

我有一个通过defineNuxtComponent定义的组件，同时使用了Options API的data和Composition API的async setup，代码如下：

<template>
  <!-- stuff -->
</template>

<script>
export default defineNuxtComponent({
    data() {
        return {
            // ...
        };
    },
    
    async setup() {
        console.log("setup");
    }
});
</script>

将组件以<Component></Component>形式引入其他组件后，首次加载时setup函数未执行（控制台无打印），但修改文件触发Nuxt热重载后，setup能正常执行并打印内容。

可能的原因 #

1. 编译缓存与API混合冲突：
   Nuxt的初始编译流程中，当组件同时混合Options API（如data）和带async的Composition API setup时，可能存在逻辑识别偏差，导致setup未被纳入首次执行流程。热重载时组件会重新编译，此时Nuxt能正确识别setup函数的执行逻辑。

2. Async setup的服务端渲染输出：
   如果你的组件在服务端渲染（SSR），async setup中的console.log会输出在服务端终端而非浏览器控制台，导致你误以为setup未执行。热重载后组件通常会在客户端重新渲染，此时console.log才会出现在浏览器控制台中。

解决办法 #

方案1：统一组件API风格

避免同时混合Options API和Composition API，选择其中一种写法，这能消除Nuxt编译时的识别歧义。例如将data的逻辑迁移到setup中：

<template>
  <!-- stuff -->
</template>

<script>
import { reactive } from 'vue';

export default defineNuxtComponent({
    async setup() {
        console.log("setup");
        // 用reactive/ref替代Options API的data
        const localState = reactive({
            // 原data中的内容
        });
        return { localState };
    }
});
</script>

方案2：控制setup的执行环境

如果必须混合API或保留async setup，可以通过以下方式确保你能看到预期的输出：

• 若只需要在客户端执行setup逻辑，添加客户端环境判断：

<script>
export default defineNuxtComponent({
    data() {
        return {
            // ...
        };
    },
    
    async setup() {
        // 仅在客户端打印日志
        if (process.client) {
            console.log("setup");
        }
    }
});
</script>

• 或者将组件标记为仅客户端渲染，使用<client-only>标签包裹引入的组件：

<client-only>
  <Component></Component>
</client-only>

方案3：移除setup的async修饰符（如果不需要异步操作）

如果你的setup函数中没有实际的异步逻辑（比如没有await操作），直接移除async修饰符，这能避免Nuxt对异步组件的特殊处理逻辑：

<script>
export default defineNuxtComponent({
    data() {
        return {
            // ...
        };
    },
    
    setup() { // 去掉async
        console.log("setup");
    }
});
</script>

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