Environment variables not working on Vercel with Nuxt

Question

I have issues accessing my environment variables deployed on Vercel.
While testing the site on my laptop's localhost, it works perfectly, but it doesn't work once deployed to Vercel.
I am trying to access the environment variables in my components and plugins directories, and I am accessing it using

computed: {
  config() {
    return{
      bucketName: process.env.AWS_BUCKET_NAME,
      dirName: process.env.AWS_DIR_NAME_1,
      region: process.env.AWS_REGION_1,
      accessKeyId: process.env.AWS_ID,
      secretAccessKey: process.env.AWS_SECRET,
    }
  }
},

All options were selected when adding my environment variables and they are exposed too

Please, what could be the issue?

Based on the suggestion below, here is what I have tried

in nuxt.config.js

privateRuntimeConfig: {
  bucketName: process.env.AWS_BUCKET_NAME,
  dirName: process.env.AWS_DIR_NAME_1,
  region: process.env.AWS_REGION_1,
  accessKeyId: process.env.AWS_ID,
  secretAccessKey: process.env.AWS_SECRET,
},

and in the plugin

import Vue from 'vue'
import S3 from "aws-s3";

export default ({ $config: { bucketName, dirName, region, accessKeyId, secretAccessKey } }) => {
  Vue.mixin({
    methods:{
      async uploadToS3(file) {
        const config = {
          bucketName,
          dirName,
          region,
          accessKeyId,
          secretAccessKey,
        }
        console.log(bucketName, dirName, region, accessKeyId, secretAccessKey);

        const S3Client = new S3(config)
        let uploadedData = S3Client.uploadFile(file, this.getRandomName(30))
        return uploadedData
      }
    }
  })
}

as I console.log the values, I do get undefined

undefined undefined undefined undefined undefined

score 3 · Accepted Answer · answered Jul 25 '21 at 23:34

3

You're not supposed to access those like this but rather use publicRuntimeConfig variables.

Here is how to use an env variable into a Nuxt plugin: https://stackoverflow.com/a/67580298/8816585

Here is how to use it broadly in any Nuxt app: https://stackoverflow.com/a/67705541/8816585

And yeah, this is where you need to add the env variables: https://stackoverflow.com/a/67389035/8816585

I hope you do use a .env file locally to test this out? Could you please add more details to be sure that you're doing this the correct way?

answered Jul 25 '21 at 23:34

kissu

40,416
14
65
133

thanks again for replying, I tried what you recommended but I get undefined, I have updated the question with what I have tried and the result – Opeyemi Odedeyi Jul 25 '21 at 23:58
1

@OpeyemiOdedeyi I've talked about `publicRuntimeConfig` and not `privateRuntimeConfig` for a reason. Private is only to be used on the server (pure node.js functions, `nuxtServerInit` and alike). For your variables, you need to put them in the public variant. Because those will be available on the client, but you can only pass "public" env variables to the client. At the end of the day, those variables are not that secret because they are probably meant to be used by a frontend. For some variables that REALLY need to be private, you need a backend middleware or alike to hide those. – kissu Jul 26 '21 at 00:03

Environment variables not working on Vercel with Nuxt

1 Answers1