An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
Some of Our Sources
- TutsPlus - Code
- Team Treehouse
- 24 Ways
- Wal You
- Specky Boy
- Freelance Switch
- Web Resource Source
- Daily Now
- Dev To
- Hashedout
Help Webnuz
Referal links:
August 18, 2022 12:40 pm GMT
Original Link: https://dev.to/amitgurbani/environment-variables-in-nuxt-3-9p6
Environment variables in Nuxt 3
To use environment variables in Nuxt 3, we need to use
runtimeConfig in nuxt.config.
import { defineNuxtConfig } from "nuxt";// https://v3.nuxtjs.org/api/configuration/nuxt.configexport default defineNuxtConfig({ runtimeConfig: { // The private keys which are only available within server-side apiSecret: "123", // Keys within public, will be also exposed to the client-side public: { apiBase: process.env.API_BASE || "default_api_url", otherUrl: process.env.OTHER_URL || "default_other_url" } }});So now if environment variables are present, their values will be stored in apiBase and otherUrl. If environment variables are not present, default values will be used for apiBase and otherUrl.
To access this within components/plugins/server routes use useRuntimeConfig().
<template> <div> API Base - {{ runtimeConfig.public.apiBase }} <br /> Other URL - {{ runtimeConfig.public.otherUrl }} <br /> </div></template><script lang="ts" setup>const runtimeConfig = useRuntimeConfig();</script>Here is the codesandbox to see it in action,
Original Link: https://dev.to/amitgurbani/environment-variables-in-nuxt-3-9p6
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To