Nuxt服务端环境中，如何指定代码在客户端渲染完成后执行？

当然可以，不用局限在组件的mounted钩子，有几种灵活的方式实现类似onClientSide(() => {})的需求：

1. 用process.client配合客户端生命周期钩子 #

不管当前代码处于服务端还是客户端上下文，只要用process.client包裹代码，这段逻辑就只会在客户端执行。再结合客户端的生命周期钩子（比如onMounted），就能确保代码在页面渲染完成后运行：

// 任意上下文都可以用
if (process.client) {
  onMounted(() => {
    window.doSomething();
  });
}

如果是Nuxt 2，写法略有不同：

if (process.client) {
  this.$nextTick(() => {
    window.doSomething();
  });
}

2. 自定义onClientSide工具函数 #

可以封装一个通用的组合式函数，让调用更简洁，完全符合你想要的回调形式：

// 在 composables/useClientSide.js 中定义
export const useClientSide = (callback) => {
  if (process.client) {
    onMounted(callback);
  }
};

// 任意地方调用
useClientSide(() => {
  window.doSomething();
});

这个函数会自动判断环境，只在客户端页面挂载完成后执行传入的回调。

3. 服务端注入内联脚本 #

如果当前明确处于服务端上下文（比如asyncData、nuxtServerInit或服务端中间件中），可以通过useHead（Nuxt 3）或head配置（Nuxt 2）直接往页面注入内联脚本，客户端加载页面后会自动执行：

// Nuxt 3 示例
if (process.server) {
  useHead({
    script: [
      {
        innerHTML: `window.doSomething();`,
        body: true, // 放在body末尾，确保DOM渲染完成
        type: 'text/javascript'
      }
    ]
  });
}

这种方式适合在服务端直接指定客户端要执行的代码，不需要依赖组件生命周期。

内容的提问来源于stack exchange，提问作者d-_-b