composables/use-runtime-config

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useRuntimeConfig composable basic usage

useRuntimeConfig is a composable that accesses runtime config variables. It can be used in Vue components (in app/app.vue with setup syntax) and in server-side contexts like server/api/foo.ts with defineEventHandler.

Runtime config definition in nuxt.config.ts

Runtime config is defined in the runtimeConfig object in nuxt.config.ts. Private keys (only available on server) are added directly to runtimeConfig. Public keys (accessible on both client and server) are defined inside runtimeConfig.public namespace.

Runtime config private vs public variables

Variables added directly to runtimeConfig are private and only accessible on the server. Variables defined in runtimeConfig.public are accessible on both server and client-side. Private variables cannot be accessed from client-side code.

Runtime config environment variable prefixing

Runtime config values can be updated using environment variables prefixed with NUXT_. For public variables, the prefix is NUXT_PUBLIC_. For private variables, the prefix is NUXT_. For example, NUXT_PUBLIC_API_BASE sets runtimeConfig.public.apiBase and NUXT_API_SECRET sets runtimeConfig.apiSecret.

Environment variables in .env file during development and build

Environment variables can be set in a .env file to make them accessible during development and build/generate phases. These variables are accessed using process.env in the Nuxt app during these phases.

Environment variables in production runtime

In production runtime, environment variables should be set using platform-specific environment variables. The .env file is not used in production.

app namespace in runtime config

The app namespace is reserved in runtime-config and includes keys like baseURL and cdnURL. Additional keys should not be introduced inside the app namespace.

app.baseURL default value and configuration

The app.baseURL is set to '/' by default. It can be updated at runtime by setting the NUXT_APP_BASE_URL environment variable. The baseURL is universally accessible from both client and server using config.app.baseURL.

app.cdnURL configuration and usage

The app.cdnURL can be set using the NUXT_APP_CDN_URL environment variable to configure a custom CDN for serving static assets from .output/public. It is universally accessible using config.app.cdnURL from both client and server.

useRuntimeConfig access example in server API route

Example: To access runtime config in a server API route defined with defineEventHandler, call useRuntimeConfig() and use config.public.apiBase for public variables and config.apiSecret for private variables (server-only).

Give your agent this brain