能否在Nuxt 3的nuxt.config.ts中使用自定义Composable配置应用？

直接在nuxt.config.ts的defineNuxtConfig中调用useMyData是不可行的。原因是nuxt.config.ts在Nuxt应用的构建/启动阶段执行，此时运行时Composable（如useAsyncGql）无法访问Nuxt的运行时上下文，异步操作也无法被正确处理。

但可以通过以下两种思路实现你的需求：

一、动态配置Head元标签 #

Nuxt提供了运行时动态设置Head的方案，适配异步数据场景：

方法1：在app.vue中直接使用useHead #

在页面根组件中先获取数据，再通过useHead动态注入元标签：

<script setup>
const mydata = await useMyData()

useHead({
  title: mydata.value?.siteTitle || '默认标题',
  meta: [
    { name: 'description', content: mydata.value?.siteDescription || '默认描述' }
  ]
})
</script>

方法2：通过Nuxt插件全局配置 #

如果需要全局统一处理，可编写插件在应用初始化时获取数据并设置Head：

// plugins/set-dynamic-head.ts
export default defineNuxtPlugin(async (nuxtApp) => {
  const mydata = await useMyData()
  nuxtApp.useHead({
    title: mydata.value?.siteTitle || '默认标题',
    meta: [
      { name: 'description', content: mydata.value?.siteDescription || '默认描述' }
    ]
  })
})

二、动态配置PWA的Web Manifest #

由于webmanifest默认是构建阶段生成的静态文件，需分两种场景处理：

方法1：运行时动态生成Manifest #

启用@vite-pwa/nuxt的runtimeManifest选项，让Manifest在客户端运行时动态生成：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vite-pwa/nuxt'],
  pwa: {
    manifest: false, // 禁用静态Manifest生成
    runtimeManifest: true,
    workbox: { /* 你的Workbox配置 */ }
  }
})

然后在app.vue中通过useRegisterSW注入动态数据：

<script setup>
const mydata = await useMyData()
const { registerSW } = useRegisterSW()

onMounted(async () => {
  await registerSW({
    manifest: {
      name: mydata.value?.appName || '默认应用名',
      short_name: mydata.value?.appShortName || '默认短名',
      start_url: '/',
      display: 'standalone',
      background_color: '#ffffff',
      theme_color: '#41b883',
      icons: [/* 可从mydata中读取图标配置 */]
    }
  })
})
</script>

方法2：构建阶段预取数据生成静态Manifest #

如果需要静态的manifest.json文件，可在Nuxt构建钩子中预取数据并生成文件：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vite-pwa/nuxt'],
  hooks: {
    async 'nitro:build:before'(nitro) {
      // 注意：需确保GraphQL客户端能在Node环境正常请求（如配置正确的服务端API地址）
      const mydata = await $fetch('/api/graphql', {
        method: 'POST',
        body: {
          query: /* 你的myData查询语句 */,
          variables: { handle: 'myVariable' }
        }
      })

      // 生成静态manifest.json到public目录
      await nitro.fs.writeJSON('./public/manifest.json', {
        name: mydata.data.myData.appName || '默认应用名',
        short_name: mydata.data.myData.appShortName || '默认短名',
        start_url: '/',
        display: 'standalone',
        background_color: '#ffffff',
        theme_color: '#41b883',
        icons: [/* 图标配置 */]
      })
    }
  },
  pwa: {
    manifest: {
      // 可留空或设置默认值，构建阶段会被生成的文件覆盖
    }
  }
})

注：此方法需直接使用$fetch调用GraphQL API，而非运行时Composable，避免依赖Nuxt运行时上下文。

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