Nuxt•3w ago

runtimeConfig is empty

runtimeConfig: {
    // The private keys which are only available within server-side
    apiSecret: '123',
    // Keys within public, will be also exposed to the client-side
    public: {
      apiBase: '/api'
    }
  },

runtimeConfig: {
    // The private keys which are only available within server-side
    apiSecret: '123',
    // Keys within public, will be also exposed to the client-side
    public: {
      apiBase: '/api'
    }
  },

thats in my nuxt.config.ts, and thats what on my page:

    <p>{{ $config.public.apiBase || "No value" }}</p>

    <p>{{ $config.public.apiBase || "No value" }}</p>

Webpage says no value 😭

6 Replies

kapa.ai•3w ago

Hi @mooz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- If your runtimeConfig is defined in nuxt.config.ts as:

runtimeConfig: {
  apiSecret: '123',
  public: {
    apiBase: '/api'
  }
},

runtimeConfig: {
  apiSecret: '123',
  public: {
    apiBase: '/api'
  }
},

…but on your page, {{ $config.public.apiBase || "No value" }} renders as "No value", it means the public runtime config is not being injected as expected. Here are the most common reasons for this issue, based on the official Nuxt documentation and community findings: 1. Correct Access in Vue In Nuxt 3, you should access runtime config in your Vue components using the useRuntimeConfig() composable, not $config (which was used in Nuxt 2). For example:

<script setup lang="ts">
const config = useRuntimeConfig()
</script>

<template>
  <p>{{ config.public.apiBase || "No value" }}</p>
</template>

<script setup lang="ts">
const config = useRuntimeConfig()
</script>

<template>
  <p>{{ config.public.apiBase || "No value" }}</p>
</template>

If you use $config directly in the template, it will not work in Nuxt 3. This is a common migration pitfall from Nuxt 2 to Nuxt 3.
See: Runtime Config Migration
See: useRuntimeConfig composable 2. Environment Variable Override If you are using environment variables to override the value, make sure you are using the correct naming convention:
- For apiBase in public, the environment variable should be NUXT_PUBLIC_API_BASE
- For apiSecret, it should be NUXT_API_SECRET
See: Environment Variables 3. .env File Not Used in Production Remember, .env files are only read during development and build. In production, you must set environment variables in your hosting platform.
See: Environment Variables 4. Correct Definition in nuxt.config You must define the keys you want to use in runtimeConfig in your nuxt.config.ts. Arbitrary environment variables will not be exposed unless they are defined in the config.
See: Runtime Config Exposing --- Summary:
- Use useRuntimeConfig() in your script, not $config in the template. - Make sure your environment variables are named correctly. - In production, set environment variables in your deployment environment, not just in .env. If you follow these steps, config.public.apiBase should be available in your component and render correctly. If you are still seeing "No value", double-check that you are not using $config in the template and that your environment variables are set as expected.
See: Official Docs - useRuntimeConfig ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@552522419307413544> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

moozOP•3w ago

1. The docs of nuxt 3 say $config.public is available for Vue access 2. Even with config.public.apiBase it still says no value @kapa.ai The docs of nuxt 3 say $config.public is available for Vue access, Even with config.public.apiBase it still says no value

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct that the Nuxt 3 documentation mentions $config.public is available in Vue templates. For example, it states:

Public runtime config is accessible in Vue templates with $config.public.<br>

Docs: Runtime Config – Exposing However, if you are using config.public.apiBase (from useRuntimeConfig()) in your script and still see "No value", here are some things to check based on the official docs: 1. Definition in nuxt.config.ts
Your config is correct:

   runtimeConfig: {
     apiSecret: '123',
     public: {
       apiBase: '/api'
     }
   }

   runtimeConfig: {
     apiSecret: '123',
     public: {
       apiBase: '/api'
     }
   }

This should expose apiBase to both server and client. 2. Access in Vue Template
The docs say you can use $config.public in templates, but the recommended and most reliable way in Nuxt 3 is to use useRuntimeConfig() in your <script setup> and then reference it in your template:

   <script setup lang="ts">
   const config = useRuntimeConfig()
   </script>
   <template>
     <p>{{ config.public.apiBase || "No value" }}</p>
   </template>

   <script setup lang="ts">
   const config = useRuntimeConfig()
   </script>
   <template>
     <p>{{ config.public.apiBase || "No value" }}</p>
   </template>

Docs: useRuntimeConfig composable 3. Environment Variable Override
If you have an environment variable like NUXT_PUBLIC_API_BASE set, it will override the value in your config. If not set, it should default to /api as in your config.
Docs: Environment Variables 4. Potential Issues
- If you are using $config in the template and it is not working, it could be a bug or a misconfiguration. The documentation does state $config.public should work, but most examples and migration guides recommend using useRuntimeConfig() in the script instead. - Make sure you are not accidentally shadowing or overwriting $config or config in your component. Summary:
- $config.public should work in templates according to the docs, but if it doesn't, use useRuntimeConfig() in your script as the most reliable method. - If neither works, double-check your environment variables and Nuxt version. If you are following the docs and still see "No value", there may be an issue with your environment or a bug. The knowledge sources do not provide further troubleshooting steps for this specific scenario beyond what is described above. Docs: Runtime Config – Exposing
Docs: useRuntimeConfig composable ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@552522419307413544> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

moozOP•3w ago

Reopening the browser fixed it.

Gaming

Programming

runtimeConfig is empty

Did you find this page helpful?