How can environment variables be managed during development and production in Nuxt?

//.env.production
NUXT_API_URL=https://live.myapp.com/api

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: process.env.API_SECRET,       // only server-side
    public: {
      apiUrl: process.env.NUXT_API_URL       // exposed to client
    }
  }
});

// Component
<script setup>
const config = useRuntimeConfig()
const apiUrl = config.public.apiUrl
</script>

<template>
  <p>API: {{ apiUrl }}</p>
</template>