Nuxt•4mo ago

useAppConfig() not exposed to <script setup> in app.vue

I created a plugin /app/plugins/fetchAppSettings.server.ts that fetches my app's settings from the database.

export default defineNuxtPlugin(async nuxtApp => {
  const { data, error } = await fetchAppSettings(supabase)

  if (error) {
    console.error('Error fetching app settings:', error)
    return
  }

  useAppConfig().appSettings = data
  console.log(useAppConfig().appSettings)
})

export default defineNuxtPlugin(async nuxtApp => {
  const { data, error } = await fetchAppSettings(supabase)

  if (error) {
    console.error('Error fetching app settings:', error)
    return
  }

  useAppConfig().appSettings = data
  console.log(useAppConfig().appSettings)
})

This seems to work fine , console.log(useAppConfig().appSettings) logs the settings correctly. Now, I want to use these settings in my app.vue script setup:

<script setup>
const appConfig = useAppConfig();
const appSettings = appConfig.appSettings;

console.log(appSettings)
</script>

<script setup>
const appConfig = useAppConfig();
const appSettings = appConfig.appSettings;

console.log(appSettings)
</script>

This console.log(appSettings) logs the settings correctly server-side but client-side, I just receive an emtpy object. In my nuxt.config.ts, I registered the app settings:

export default defineNuxtConfig({
  appConfig: {
    appSettings: {}
  },
...

export default defineNuxtConfig({
  appConfig: {
    appSettings: {}
  },
...

and I created a app.config.ts file and registered the appSettings there:

export default defineAppConfig({
  appSettings: {}
})

export default defineAppConfig({
  appSettings: {}
})

What am I missing here? Why aren't the appSettings passed to the client correctly? Help would be much appreciated.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

useAppConfig() not exposed to <script setup> in app.vue