# Public browser variables

[← Back to Nuxt](https://dotenvx.com/docs/nuxt.md#ship)

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

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

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

**npm**

```console
$ npx dotenvx set NUXT_PUBLIC_SITE_NAME "My app"
```

**pnpm**

```console
$ pnpm exec dotenvx set NUXT_PUBLIC_SITE_NAME "My app"
```

Read it in a component:

```vue
<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](https://nuxt.com/docs/4.x/guide/going-further/runtime-config).