Environment variables management in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access an environment variable in a Vue component.

Vue

const apiUrl = process.env.[1];

Drag options to blanks, or click blank then click option'

AAPI_URL

BVUE_API_URL

CVUE_APP_API_URL

DAPP_API_URL

Attempts:

3 left

💡 Hint

Common Mistakes

Using environment variables without the VUE_APP_ prefix.

Trying to access variables directly without process.env.

In Vue, environment variables must start with VUE_APP_ to be accessible in the app code.

2fill in blank

medium

Complete the code to define a new environment variable in the .env file.

Vue

[1]=https://api.example.com

Drag options to blanks, or click blank then click option'

AAPP_API_URL

BAPI_URL

CVUE_API_URL

DVUE_APP_API_URL

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the VUE_APP_ prefix in the .env file.

Using lowercase letters in the variable name.

Environment variables in Vue must be prefixed with VUE_APP_ in the .env file to be loaded.

3fill in blank

hard

Fix the error in accessing the environment variable inside a Vue component.

Vue

console.log(import.meta.env.[1]);

Drag options to blanks, or click blank then click option'

AVUE_APP_API_URL

BVITE_API_URL

CAPI_URL

DAPP_API_URL

Attempts:

3 left

💡 Hint

Common Mistakes

Using process.env instead of import.meta.env in Vite projects.

Using the Vue CLI prefix VUE_APP_ in Vite projects.

In Vue 3 with Vite, environment variables use the VITE_ prefix and are accessed via import.meta.env.

4fill in blank

hard

Fill both blanks to create a computed property that returns the API URL from environment variables.

Vue

import { computed } from 'vue';

const apiUrl = computed(() => [1].env.[2]);

Drag options to blanks, or click blank then click option'

Aimport.meta

Bprocess

CVITE_API_URL

DVUE_APP_API_URL

Attempts:

3 left

💡 Hint

Common Mistakes

Using process.env in Vite projects.

Using the Vue CLI prefix instead of VITE_ prefix.

In Vue 3 with Vite, environment variables are accessed via import.meta.env and use the VITE_ prefix.

5fill in blank

hard

Fill all three blanks to create a method that logs the environment variable and handles missing values.

Vue

methods: {
  logApiUrl() {
    const url = [1].env.[2] || [3];
    console.log(url);
  }
}

Drag options to blanks, or click blank then click option'

Aimport.meta

BVITE_API_URL

C'No API URL set'

Dprocess

Attempts:

3 left

💡 Hint

Common Mistakes

Using process.env in Vite projects.

Not providing a fallback value for missing variables.

This method uses import.meta.env.VITE_API_URL to get the URL and provides a fallback string if it's missing.