To load variables from GitLab to a Vue.js application using a .env file, you can follow these steps:

  1. Create a .env file: Create a new .env file at the root of your Vue.js project. This file will store the environment variables.

  2. Add Variables in GitLab: In GitLab, go to your project's settings and navigate to "CI/CD" > "Variables." Add the environment variables you want to use in your Vue.js application. For example, you might add a variable called VUE_APP_API_KEY with its corresponding value.

  3. Modify .env File: In the .env file, add the environment variables you want to load from GitLab. Prefix each variable with VUE_APP_ to make it accessible in your Vue.js app. For example:


    Note that you don't need to wrap the values in quotes in the .env file.

  4. Load .env Variables in Vue App: To make the environment variables available in your Vue.js app, you can use the dotenv package along with the vue-cli-service.

    First, install the dotenv package:

    npm install --save-dev dotenv

    Then, create a file called vue.config.js in the root of your project with the following content:

    const Dotenv = require('dotenv-webpack'); module.exports = { configureWebpack: { plugins: [new Dotenv()], }, };

    This configuration ensures that the .env file will be loaded and parsed during the build process, making the variables accessible in your Vue.js application.

  5. Access Environment Variables: Now, you can access the environment variables in your Vue components using process.env.VUE_APP_ prefix. For example:

    // SampleComponent.vue export default { mounted() { const apiKey = process.env.VUE_APP_API_KEY; console.log(apiKey); // Access the API key value }, };

    When you run your Vue.js application, it will read the .env file and replace the process.env.VUE_APP_ references with the corresponding values.

  6. Add .env to .gitignore: Finally, make sure to add the .env file to your .gitignore to avoid committing sensitive environment variables to your version control system.

Please note that this approach works for Vue.js applications created with the Vue CLI. If you are using a different setup or build tool, the steps might vary slightly. Additionally, ensure that you use environment variables for non-sensitive information; sensitive credentials or secrets should be handled differently, such as using environment-specific configurations on the server-side.

Have questions or queries?
Get in Touch