next .config.ts中的3个可组合项

Question

我使用next -graphql-client创建了一个通过graphql加载api数据的组合文件

我在我的/composables/useMyData.ts

export const useMyData = async () => {
const { data } = await useAsyncGql({
operation: 'myData',
variables: { handle: 'myVariable' }
})
return data
}

然后我可以像这样在app。vue上访问它

<script setup>
const mydata = await useMyData()
</script>

到目前为止还不错，但有些情况下，我想在defineNuxtConfig({ })或nuxt.config.ts内的应用程序设置中使用一些数据。

例如head:中的元标签，并通过pwa设置填充.webmanifest(使用@vite-pwa/nuxt)。

这可能吗?

Answer 1

根据我使用next的经验，这是不可能的，因为当next启动时，它首先从nuxt.config.ts读取所有内容以初始化自己。

但是，对于Meta标签，可以在页面本身使用特殊的next组件:https://nuxt.com/docs/getting-started/seo-meta

示例:<Meta name="description" :content="title" />

选择:要用动态数据填充nuxt.config.ts，还可以在next外部执行GraphQL请求，并将答案存储在文件中。然后将该文件导入到下一个配置中。

Answer 2

不，你不能直接在nuext .config.ts文件中使用nuext 3组合文件，nuext .config.ts是专门用于配置你的nuext设置和选项的。它不适合编写JavaScript代码或使用可组合程序。