CODEWITHSUNDEEP
javascriptamazon-web-servicesvue.jsdeploymentnuxt.js
Opeyemi Odedeyi
Opeyemi Odedeyi

Reputation: 770

Environment variables not working on Vercel with Nuxt

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

All options were selected when adding my environment variables variables 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

Upvotes: 3

Views: 2704

Answers (1)

kissu
kissu

Reputation: 46602

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?

Upvotes: 3

Related Questions