Environment variables management in Vue - Mini Project: Build & Apply

Environment variables management

📖 Scenario: You are building a Vue app that needs to show different messages depending on the environment it runs in, like development or production.

🎯 Goal: Create a Vue 3 app that reads an environment variable and displays it on the page.

📋 What You'll Learn

Create a Vue 3 app with App.vue component

Use environment variables with the import.meta.env syntax

Display the environment variable value in the template

Use a config variable to hold the environment variable value

💡 Why This Matters

🌍 Real World

Many Vue apps need to behave differently in development, testing, and production. Environment variables help manage these differences safely.

💼 Career

Understanding environment variables is essential for frontend developers to configure apps without hardcoding sensitive or environment-specific data.

1

Create the Vue app skeleton

Create a Vue 3 single file component called App.vue with a <template> section containing a <div> with the text Environment: . Also add an empty <script setup> section.

Vue

  Environment: 



// Your code here

Hint

Start by writing the basic Vue component structure with template and script setup tags.

2

Add a config variable for the environment

Inside the <script setup> section, create a constant called envMessage and set it to import.meta.env.VITE_APP_ENV.

Vue

  Environment: 



// Create a constant envMessage for the environment variable
// Your code here

Hint

Use const envMessage = import.meta.env.VITE_APP_ENV to read the environment variable.

3

Display the environment variable in the template

Modify the <div> inside the <template> to show the text Environment: followed by the value of envMessage using Vue's mustache syntax.

Vue

  Environment: {{ envMessage }}



const envMessage = import.meta.env.VITE_APP_ENV
// Your code here

Hint

Use {{ envMessage }} inside the div to show the variable.

4

Add a fallback for missing environment variable

Update the envMessage constant to use the value of import.meta.env.VITE_APP_ENV or fallback to the string 'unknown' if it is not set, using the logical OR operator.

Vue

  Environment: {{ envMessage }}



// Update envMessage to fallback to 'unknown' if undefined
const envMessage = import.meta.env.VITE_APP_ENV || 'unknown'

Hint

Use const envMessage = import.meta.env.VITE_APP_ENV || 'unknown' to provide a fallback.