CODEWITHSUNDEEP
nuxt.jsnuxt3.js
Saro
Saro

Reputation: 618

Nuxt 3 Composables inside nuxt.config.ts

I created a composable to load api data via graphql, using nuxt-graphql-client

I have this in my /composables/useMyData.ts

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

and then I can access it on app.vue like this:

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

So far so good, but there are cases where I would like to use some of that data in app settings inside defineNuxtConfig({ }) of nuxt.config.ts.

For example meta tags in head: and to populate the .webmanifest via pwa settings (using @vite-pwa/nuxt).

would that be popssible?

Upvotes: 1

Views: 2314

Answers (2)

Tomide
Tomide

Reputation: 21

No, you cannot directly use a Nuxt 3 composable in the nuxt.config.ts file, The nuxt.config.ts is specifically for configuring your Nuxt settings and options. It is not intended for writing JavaScript code or using composables.

Upvotes: 1

David
David

Reputation: 948

From my experience with Nuxt this is not possible, because when Nuxt starts up, it first reads everything from nuxt.config.ts to initialise itself.

However, for Meta tags, there are special Nuxt components that can be used on the page itself: https://nuxt.com/docs/getting-started/seo-meta

Example: <Meta name="description" :content="title" />

Alternative: To populate nuxt.config.ts with dynamic data, you could also do a GraphQL request outside of Nuxt and store the answer in a file. Then you import that file into the nuxt config.

Upvotes: 2

Related Questions