Public browser variables

Expose configuration intended for the browser.

Declare browser-visible values under runtimeConfig.public, keeping hello private:

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    hello: '',
    public: {
      siteName: ''
    }
  }
})

Add the matching NUXT_PUBLIC_SITE_NAME variable to your encrypted .env file:

$ npx dotenvx set NUXT_PUBLIC_SITE_NAME "My app"

$ pnpm exec dotenvx set NUXT_PUBLIC_SITE_NAME "My app"

Read it in a component:

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

<template>
  <h1>{{ config.public.siteName }}</h1>
</template>

Restart npm run dev or pnpm dev. For production, set NUXT_PUBLIC_SITE_NAME in .env.production too, using the same command with -f .env.production.

Encryption protects the committed file. Nuxt sends public runtime configuration to browsers, so only use this for public values. See Nuxt runtime config.