What is the difference between useRuntimeConfig and .env in Nuxt 3?

Question

Accepted Answer

**useRuntimeConfig** — runtime config. **.env** — environment variables.

**useRuntimeConfig:**
```typescript
// nuxt.config.ts
export default defineNuxtConfig({
    runtimeConfig: {
        apiSecret: "server-only",
        public: {
            apiUrl: "https://api.example.com"
        }
    }
})

// In component
const config = useRuntimeConfig()
console.log(config.public.apiUrl)  // Client + Server
console.log(config.apiSecret)  // Server only
```

**.env:**
```bash
NUXT_API_SECRET=secret
NUXT_PUBLIC_API_URL=https://api.example.com
```

**Key differences:**
- **useRuntimeConfig** — type-safe.
- **.env** — simpler.

Vue.js: What is the difference between useRuntimeConfig and .env in Nuxt 3?