N
Nuxt•6mo ago
gamsbumps

Website configuration

I'm building a multitenancy site and I don't know where to put my config files, such as public bearer token, name of the site, images, favicon, public recaptcha. Should I use the runtimeconfig of nuxt.config or in another folder? i started using as a composable, but once I ran the project, the file was exposed.
2 Replies
kapa.ai
kapa.ai•6mo ago
Hi @gamsbumps. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- For your multitenancy site, you should use Nuxt's runtimeConfig in your nuxt.config.ts for sensitive or environment-dependent values (like public bearer tokens, public reCAPTCHA keys), and app.config.ts for public, build-time configuration (like site name, theme, or static images). Key points: - runtimeConfig:
- Use for values that may change per environment or need to be set via environment variables (e.g., tokens, API keys). - Public values (e.g., public API keys) go under runtimeConfig.public so they are available on both server and client. - Private values (e.g., secrets) go at the root of runtimeConfig and are only available server-side. - These values are not bundled in the client code, but public ones are exposed at runtime. - Example: 
    // nuxt.config.ts
    export default defineNuxtConfig({
      runtimeConfig: {
        apiSecret: '', // server only
        public: {
          bearerToken: '', // exposed to client
          recaptchaKey: '',
        }
      }
    })
    
    // nuxt.config.ts
    export default defineNuxtConfig({
      runtimeConfig: {
        apiSecret: '', // server only
        public: {
          bearerToken: '', // exposed to client
          recaptchaKey: '',
        }
      }
    })
Access with useRuntimeConfig() in your app or API routes
Nuxt Configuration: runtimeConfig - app.config.ts:
- Use for public, non-sensitive config that is determined at build time (e.g., site name, theme, static URLs). - These values are bundled in the client and cannot be overridden by environment variables. - Example: 
    // app.config.ts
    export default defineAppConfig({
      siteName: 'My Multitenant Site',
      favicon: '/favicon.ico',
      images: {
        logo: '/logo.png'
      }
    })
    
    // app.config.ts
    export default defineAppConfig({
      siteName: 'My Multitenant Site',
      favicon: '/favicon.ico',
      images: {
        logo: '/logo.png'
      }
    })
Access with useAppConfig()
App Config Guide Do not use composables for static config if you want to avoid exposing files directly, as you noticed—they are bundled and exposed to the client. Summary Table: | Config Type | Use runtimeConfig | Use app.config.ts | |---------------------|--------------------------|---------------------------| | Public API keys | ✅ (runtimeConfig.public) | | | Private secrets | ✅ (runtimeConfig) | | | Site name, theme | | ✅ | | Static image paths | | ✅ | | Favicon | | ✅ | For more details, see the comparison in the docs:
runtimeConfig vs. app.config Important:
- Never put secrets in app.config.ts—it is always exposed to the client. - Only use runtimeConfig.public for values that are safe to expose to the client. - For static assets like images and favicon, place them in the public/ directory and reference their paths in your config files. If you need per-tenant configuration at runtime, you may need to implement logic to load the correct config based on the request, possibly using server middleware or API routes, but the above covers the standard Nuxt config approach. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•6mo ago
<@378737708303908864> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?