[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"global-header-tutorials-static":3,"article-environment-variables-in-nuxt":4,"initial-similar-fetch":20},[],{"alias":5,"title":6,"description":7,"content":8,"thumbnail":9,"keywords":10,"categories":16,"tags":18,"createdAt":19},"environment-variables-in-nuxt","The Definitive Guide to Environment Variables in Nuxt 4","How to create Environment Variables in Nuxt 4","{\"type\":\"doc\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"In this tutorial, we are going to set up different environmental variables in our Nuxt 4 project. Environmental variables are the key aspect of security. Nuxt provides a clean way to do so without rebuilding our apps for each existing variable change.\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Creating .env files and defining the variables\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Create the .env file in your root project directory. This is for local\u002Fdefault variables setup.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Note that the .env file must be git ignored for security reasons. Later in this article, we will show how to use these environment variables for deployment. We are using some sample variable examples.\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"# Private keys (Server-side only)\\nNUXT_API_SECRET=secure_key\\nNUXT_BASE_URL=https:\u002F\u002Fapi.example.com\\n\\n# Public keys (Available to Client & Server)\\nNUXT_PUBLIC_BASE_URL=https:\u002F\u002Fapi.example.com\"}]},{\"type\":\"blockquote\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Tips: Here, prefixing variables with \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"NUXT_\"},{\"type\":\"text\",\"text\":\" will automatically map them to the configuration.\"}]}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Configuring \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"nuxt.config.ts\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Let's configure those variables in our config file so that they can be accessible at runtime. \"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"export default defineNuxtConfig({\\n  runtimeConfig: {\\n    \u002F\u002F Keys within here are only available server-side i.e nitro server\\n    apiSecret: '', \u002F\u002F Can be overridden by NUXT_API_SECRET\\n    baseUrl: ''\\n\\n    \u002F\u002F Keys within public are available for both(Browser + Server)\\n    public: {\\n      baseUrl: '\u002Fdefault-api' \u002F\u002F Can be overridden by NUXT_PUBLIC_BASE_URL\\n    }\\n  }\\n})\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Here, values placed inside the public will be available for the browser, and the Nirto server, and the values outside of public will be available for the server only. Also note that the apiSecret will be overridden by our env file variable \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"NUXT_API_SECRET\"},{\"type\":\"text\",\"text\":\".\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"Why use \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"runtimeConfig\"},{\"type\":\"text\",\"text\":\" over \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"process.env\"},{\"type\":\"text\",\"text\":\"?\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"process.env\"},{\"type\":\"text\",\"text\":\" is static once the app is built, so we cannot change the variables with deployment. For different deployment providers, there will be options to set up these environmental variables. The changes in environment variables will not reflect in the app; it needs to be rebuilt.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"runtimeConfig\"},{\"type\":\"text\",\"text\":\" will allow changes to the values at runtime(i.e docker, pm2 deploy, cloudflare), which doesn't require a rebuild.\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Implementation in our Code\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"In order to access those variables in our app code base, Nuxt provides the \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"useRuntimeConfig()\"},{\"type\":\"text\",\"text\":\" composiable.\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"In Vue Components\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"ts\"},\"content\":[{\"type\":\"text\",\"text\":\"\u003Cscript setup lang=\\\"ts\\\">\\nconst config = useRuntimeConfig()\\n\\n\u002F\u002F Accessing public variables\\nconsole.log(config.public.baseUrl)\\n\\n\u002F\u002F Accessing private variables (Will be undefined on the client)\\nconsole.log(config.baseUrl) \\n\u003C\u002Fscript>\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"In Server Routes (Nitro)\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"ts\"},\"content\":[{\"type\":\"text\",\"text\":\"export default defineEventHandler(async (event) => {\\n  const config = useRuntimeConfig();\\n  \\n  const response = await $fetch(`${config.baseUrl}\u002Fdata`, {\\n    headers: { Authorization: `Bearer ${config.apiSecret}` }\\n  });\\n\\n  return response;\\n});\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Deployment and Production\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"While deploying our Nuxt app with a different provider, we need to set up these environment variables.\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"Set Up in Process Manager(PM2)\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Deploying an app with pm2 with an environmental variable in production is a good way to secure your application. Here is the full tutorial on \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https:\u002F\u002Fcsbyte.com\u002Fblog\u002Fhow-to-deploy-nuxt-app-in-ubuntu-server\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null,\"title\":null}}],\"text\":\"installing and setting up Process Manager(PM2) for Nuxt deployment\"},{\"type\":\"text\",\"text\":\".\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Inside \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"ecosystem.config.cjs\"},{\"type\":\"text\",\"text\":\" we will be creating those variables.\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"js\"},\"content\":[{\"type\":\"text\",\"text\":\"module.exports = {\\n  apps: [\\n    {\\n      name: 'csbyte',\\n      port: '3000',\\n      exec_mode: 'cluster',\\n      instances: 'max',\\n      script: '.\u002F.output\u002Fserver\u002Findex.mjs',\\n      env: {\\n        NUXT_API_SECRET: 'prod_key_123',\\n        NUXT_BASE_URL: 'https:\u002F\u002Fbackend.csbyte.com'\\n        NUXT_PUBLIC_BASE_URL: 'https:\u002F\u002Fcsbyte.com'\\n      }\\n    }\\n  ]\\n}\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"For Cloudflare\"}]},{\"type\":\"bulletList\",\"content\":[{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Go to \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"Workers & Pages\"},{\"type\":\"text\",\"text\":\" > Select your Project > \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"Settings\"},{\"type\":\"text\",\"text\":\" > \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"Variables and Secrets\"}]}]}]},{\"type\":\"image\",\"attrs\":{\"src\":\"https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002Fe8a3c4e7-98a6-4114-a8c8-49ebb4a9522f_nuxt_env_cloudflare.png\",\"alt\":null,\"title\":null,\"width\":null,\"height\":null}},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"Using Node Native Way\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"If you are deploying and running your app in a native way without using any providers, we need to be more careful with this.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Suppose you do have \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\".env.production\"},{\"type\":\"text\",\"text\":\" file and you wanna try to build with the native way:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"npx nuxi build --dotenv .env.production\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This will not work with our current environment setup. i.e. Nuxt does read the \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\".env.production\"},{\"type\":\"text\",\"text\":\" file during the build process, but it will not update those values in the production server's execution memory. \"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"So, while running the app(Runtime)\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"node .output\u002Fserver\u002Findex.mjs\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"It will use the fallback default values or undefined. Nuxt does this to support the cloud architecture (like Docker or pm2 and Cloudflare Workers), where a traditional filesystem \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\".env\"},{\"type\":\"text\",\"text\":\" file doesn't exist or shouldn't be hardcoded.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"In order to work this, either we need to use process.env to update our Nuxt runtime config, which requires rebuilding for each config variable change(Not recommended), or explicitly supply the config file while running the app.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Here is the example for explicitly providing the runtime config file:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"node --env-file=.env.production .output\u002Fserver\u002Findex.mjs\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This will use the production environmental file and use the variables at runtime. This is a very good practice, so that we can securely add the files to the production server and prevent exposing the privacy to git or other development teams.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"By utilizing \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"runtimeConfig\"},{\"type\":\"text\",\"text\":\" the \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"NUXT_\"},{\"type\":\"text\",\"text\":\" prefix, we ensure that our Nuxt 4 application is secure, type-safe, and ready for any deployment environment and providers. \"}]}]}","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002Fe8a3c4e7-98a6-4114-a8c8-49ebb4a9522f_nuxt_env_cloudflare.png",[11,12,13,14,15],"cloudflare","vuejs","deploy","environment-variables","nuxt",[17],"NuxtJS",[15],"2026-05-04T12:35:52.854Z",[21,28,34,40,46],{"alias":22,"title":23,"description":24,"thumbnail":25,"createdAt":26,"tutorialAlias":27,"lessonAlias":27},"securing-nuxt-ssr-app-with-cookies-sessions","Securing Nuxt SSR Apps with cookies sessions","Nuxt 4 App how to create an authentication system in SSR mode","\u002Fuploads\u002Fthumbnails\u002F6088642b-8dcb-4d13-bb68-f90084ddbe04_nuxt_ssr_logi.jpeg","2026-05-18T14:36:54.441Z",null,{"alias":29,"title":30,"description":31,"thumbnail":32,"createdAt":33,"tutorialAlias":27,"lessonAlias":27},"static-assets-vs-dynamic-routing-collision","Static Assets vs. Dynamic Routing Collision","Resolving the Static Assets vs. Dynamic Routing Collision","\u002Fuploads\u002Fthumbnails\u002F0f4d63d1-8ca4-472f-8f6d-9bd6919a88b9_nuxt_collisio.jpeg","2026-05-16T08:36:46.316Z",{"alias":35,"title":36,"description":37,"thumbnail":38,"createdAt":39,"tutorialAlias":27,"lessonAlias":27},"configure-nginx-as-reverse-proxy-in-nuxt","Configure Nginx as a reverse proxy in Nuxt application","Deploy and set up the nginx in Nuxt application","\u002Fuploads\u002Fthumbnails\u002F23c9fd84-6a39-40f1-876f-ba81011ccf06_nginx_nux.jpeg","2026-05-03T10:00:48.702Z",{"alias":41,"title":42,"description":43,"thumbnail":44,"createdAt":45,"tutorialAlias":27,"lessonAlias":27},"how-to-deploy-nuxt-app-in-ubuntu-server","How to deploy Nuxt app in Ubuntu Server","Deploy Nuxt App in Linux VM","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002F808571e8-1ce9-4e1b-901f-7afd81f4c7df_pm2.png","2026-05-02T08:11:55.437Z",{"alias":47,"title":48,"description":49,"thumbnail":50,"createdAt":51,"tutorialAlias":27,"lessonAlias":27},"how-to-deploy-our-nuxt-application-to-cloudflare","How to deploy our nuxt application to cloudflare","Deploy our Nuxt application to Cloudflare using Wrangler","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002F19c8ef54-4006-4bfa-a07d-b2dd5e401c22_nuxt_deploy.png","2026-05-02T02:23:45.510Z"]