I'm currently developing a Vue.js application and deploying it on Cloudron. I'm trying to access an environment variable (VUE_APP_DIRECTUS_TOKEN) in my Vue.js component, but it always returns undefined.

Here's the relevant part of my code:

methods: {
  async register() {
    try {
      await axios.post(
        'https://directus.example.com',
        {
          email: this.email,
          password: this.password,
          status: 'active'
        },
        {
          headers: {
            Authorization: `Bearer ${import.meta.env.VUE_APP_DIRECTUS_TOKEN}`
          }
        }
      )
      alert('Registration successful')
    } catch (error) {
      alert('Registration failed: ' + error.message)
    }
  }
}

I've tried setting the environment variable in a .env file in the root of my project, and also in an env.sh file in the /app/data/ directory as suggested by Cloudron's documentation. I've also tried using the export keyword. However, none of these methods seem to work.

Here's how I've set the environment variable:

export VUE_APP_DIRECTUS_TOKEN=my_token_here

Sure, here's a draft for your forum question:

Title: Unable to Access Environment Variables in Vue.js App on Cloudron

Body:

Hello,

I'm currently developing a Vue.js application and deploying it on Cloudron. I'm trying to access an environment variable (VUE_APP_DIRECTUS_TOKEN) in my Vue.js component, but it always returns undefined.

Here's the relevant part of my code:

methods: {
  async register() {
    try {
      await axios.post(
        'https://wij.metaalkathedraal.nl/users',
        {
          email: this.email,
          password: this.password,
          status: 'active'
        },
        {
          headers: {
            Authorization: `Bearer ${import.meta.env.VUE_APP_DIRECTUS_TOKEN}`
          }
        }
      )
      alert('Registration successful')
    } catch (error) {
      alert('Registration failed: ' + error.message)
    }
  }
}

I've tried setting the environment variable in a .env file in the root of my project, and also in an env.sh file in the /app/data/ directory as suggested by Cloudron's documentation. I've also tried using the export keyword. However, none of these methods seem to work.

Here's how I've set the environment variable:

export VUE_APP_DIRECTUS_TOKEN=your_token_here

I've made sure to restart the app after making changes to the environment variables.

I'm able to hardcode the token directly into the code and it works, so the issue seems to be with loading the environment variable.

Does anyone have any suggestions on how to correctly set and access environment variables in a Vue.js app on Cloudron?

Thank you in advance for your help.