How to use environment variables in Vue 3 component in a Vite based project

Posted on October 16, 2022

This assume you have a Vue 3 project with Vite CLI up and running.

Se the variable in the .env file:


Remember that VITE_APP_ prepend is required in order to let them accessible from within Vue components.

Here the component:

<script setup>
   const myVar = import.meta.env.VITE_APP_MY_VAR