N
Nuxt•4d ago
Meldiron

Reading public env var in lib script

I have lib/index.js and my code is: 
  const client = new Client()
  .setEndpoint(process.env.NUXT_PUBLIC_APPWRITE_ENDPOINT)
  .setProject(process.env.NUXT_PUBLIC_APPWRITE_PROJECT_ID);
  const client = new Client()
  .setEndpoint(process.env.NUXT_PUBLIC_APPWRITE_ENDPOINT)
  .setProject(process.env.NUXT_PUBLIC_APPWRITE_PROJECT_ID);
if I try to console.log those values (endpoint and project), I get correct values in CLI (server-side rendering), but in browser's console both are undefined. How do I read public env vars properly?
7 Replies
kapa.ai
kapa.ai•4d ago
Hi @Meldiron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To properly read public environment variables in Nuxt 3, you should use the useRuntimeConfig() composable instead of directly accessing process.env. Here's how you can modify your code to correctly access the public environment variables: 
import { useRuntimeConfig } from '#app'

const config = useRuntimeConfig()

const client = new Client()
  .setEndpoint(config.public.APPWRITE_ENDPOINT)
  .setProject(config.public.APPWRITE_PROJECT_ID);
import { useRuntimeConfig } from '#app'

const config = useRuntimeConfig()

const client = new Client()
  .setEndpoint(config.public.APPWRITE_ENDPOINT)
  .setProject(config.public.APPWRITE_PROJECT_ID);
This approach will work both on the server-side and in the browser. Here's why this is the correct way to handle environment variables in Nuxt 3: 1. Nuxt 3 uses a runtime config system to expose configuration and environment variables to your application Runtime Config. 2. You need to define these variables in your nuxt.config.ts file under the runtimeConfig.public object Runtime Config - Exposing. 3. Environment variables prefixed with NUXT_PUBLIC_ are automatically added to the public runtime config Environment Variables. 4. The useRuntimeConfig() composable is used to access these variables throughout your application Access Runtime Config. Remember to update your nuxt.config.ts file to include these variables: 
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      APPWRITE_ENDPOINT: '',
      APPWRITE_PROJECT_ID: ''
    }
  }
})
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      APPWRITE_ENDPOINT: '',
      APPWRITE_PROJECT_ID: ''
    }
  }
})
Then, you can set the actual values in your .env file: 
NUXT_PUBLIC_APPWRITE_ENDPOINT=your_endpoint_here
NUXT_PUBLIC_APPWRITE_PROJECT_ID=your_project_id_here
NUXT_PUBLIC_APPWRITE_ENDPOINT=your_endpoint_here
NUXT_PUBLIC_APPWRITE_PROJECT_ID=your_project_id_here
By following this approach, your environment variables will be correctly accessible both on the server-side and in the browser. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@287294735054274560> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Meldiron
MeldironOP•4d ago
@kapa.ai I cannot use useRuntimeConfig() inside JavaScript file in lib.
kapa.ai
kapa.ai•4d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct, and I apologize for the confusion in my previous answer. You're right that you can't directly use useRuntimeConfig() in a plain JavaScript file in the lib directory. This is because useRuntimeConfig() is a Nuxt composable that requires the Nuxt context, which is not available in plain JavaScript files. For your specific case of accessing environment variables in a lib file, there are a few approaches you can consider: 1. Create a plugin or composable: Instead of putting your client initialization code directly in a lib file, you could create a plugin or a composable that uses useRuntimeConfig() and then exports the initialized client. This way, you can access the environment variables correctly. 2. Pass the config as parameters: You could pass the necessary configuration values as parameters when calling functions from your lib file. This way, you can initialize the client with the correct values from a component or page where useRuntimeConfig() is available. 3. Use a workaround with an env.js file: As suggested in this Stack Overflow answer, you could create an env.js file that exports the environment variables, and then import this file in your lib script. Here's an example: 
   // env.js
   export function getConfig() {
     return {
       APPWRITE_ENDPOINT: 'your_endpoint_here',
       APPWRITE_PROJECT_ID: 'your_project_id_here'
     }
   }

   // lib/index.js
   import { getConfig } from '../env.js'

   const config = getConfig()
   const client = new Client()
     .setEndpoint(config.APPWRITE_ENDPOINT)
     .setProject(config.APPWRITE_PROJECT_ID)
   
   // env.js
   export function getConfig() {
     return {
       APPWRITE_ENDPOINT: 'your_endpoint_here',
       APPWRITE_PROJECT_ID: 'your_project_id_here'
     }
   }

   // lib/index.js
   import { getConfig } from '../env.js'

   const config = getConfig()
   const client = new Client()
     .setEndpoint(config.APPWRITE_ENDPOINT)
     .setProject(config.APPWRITE_PROJECT_ID)
This approach allows you to have different values for development and production by modifying the env.js file. Remember that while these workarounds can help you access environment-like variables in plain JavaScript files, they don't provide the same level of security and flexibility as Nuxt's built-in runtime config system. If possible, consider restructuring your code to use Nuxt's features more directly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@287294735054274560> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Meldiron
MeldironOP•4d ago
AI isnt being useful :/ If anyone has experience, I would highly appreciate the answer 🙌
Kal
Kal•3d ago
What AI suggests makes sense to me, essentially making a wrapper for that js lib, such that the js lib doesn't interact with Nuxt, it interacts with your wrapper. Basically, Nuxt provides the possibility of passing env values into the app at runtime, but you need to still pass it in some fashion. I would think a wrapper does that (a bridge between Nuxt and vanilla JS). Absolute worst-case scenario, on app mount, you could look at dumping public env values into the browser window object and pull from that globally from any JS, anywhere.

Did you find this page helpful?