How access environment variables from a Framework Components in Astro?

Question

I'm working in a project using Astro and I am using a component with VUE. For this project I need to access some env vars.

I am able to access from the Astro templates, but I can't find a way to get in the VUE component. Is this possible?

Answer 1

There is no way to do this without exposing the environment variables.

To do this, we have to move the function to an endpoint of our API that runs on the server side and make a request to execute it safely.

Answer 2

You can expose the env var as data to the Vue component like so...

Vue 2
<script>
const { PUBLIC_ENV_HERE } = import.meta.env;

export default {
  data() {
    return {
      PUBLIC_ENV_HERE,
    };
  },
};
</script>

Vue 3 with script setup
<script setup>
const { PUBLIC_ENV_HERE } = import.meta.env;
</script>

Remember to prefix client side variables with PUBLIC - see https://docs.astro.build/en/guides/environment-variables/ for more info.