如何编写可在客户端与服务端运行的Nuxt 3简易Composable

1. 调整别名与Nuxt配置 #

在nuxt.config.ts里配置运行时可识别的别名，替换原有的静态路径别名，确保服务端能正确找到文件：

export default defineNuxtConfig({
  alias: {
    '#user-preferences': './src/runtime'
  },
  modules: ['./src/module.ts'],
  runtimeConfig: {
    // 仅存放非动态的基础配置，动态偏好逻辑单独处理
  },
  build: {
    transpile: ['./src/runtime']
  }
})

2. 抽离通用核心逻辑 #

把与端侧无关的偏好获取核心代码单独放到src/runtime/utils/preferences-core.ts，让客户端和服务端代码共享这部分逻辑：

// src/runtime/utils/preferences-core.ts
export async function getAppPreferences(userId?: string) {
  // 这里编写动态获取偏好的核心逻辑，比如从数据库/内部接口读取
  // 示例：
  const res = await $fetch('/api/internal/fetch-preferences', {
    params: { userId }
  })
  return res.data
}

3. 客户端Composable（复用原有实现） #

src/runtime/use-preferences.ts：

import { getAppPreferences } from './utils/preferences-core'

export const usePreferences = () => {
  const user = useUser()
  return useAsyncData('app-preferences', () => getAppPreferences(user.value?.id))
}

4. 服务端调用工具 #

src/runtime/server/utils/server-preferences.ts：

import { getAppPreferences } from '../../utils/preferences-core'

// 适配服务端上下文的调用工具
export async function getServerPreferences(event: H3Event, userId?: string) {
  // 从请求上下文获取用户信息（如果需要）
  const authUser = await getCurrentUser(event)
  return getAppPreferences(userId || authUser?.id)
}

5. 服务端API调用示例 #

在server/api/xxx.ts中直接通过别名导入使用：

import { getServerPreferences } from '#user-preferences/server/utils/server-preferences'

export default defineEventHandler(async (event) => {
  const preferences = await getServerPreferences(event)
  // 后续业务逻辑处理
  return { code: 200, data: preferences }
})

6. 修正Module.ts配置 #

确保模块中正确注册runtime目录，避免路径问题：

// src/module.ts
import { defineNuxtModule } from '@nuxt/kit'
import { fileURLToPath } from 'node:url'

export default defineNuxtModule({
  setup(_options, nuxt) {
    // 将runtime目录加入Nuxt扫描范围
    nuxt.options.runtimeConfig.public = nuxt.options.runtimeConfig.public || {}
    nuxt.options.build.transpile.push(fileURLToPath(new URL('./runtime', import.meta.url)))
  }
})

通过以上调整，客户端和服务端都能通过统一别名引用通用逻辑，动态偏好的获取不再依赖静态配置，服务端API也能正常调用偏好功能。

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