How to retrieve config and env variable in vue component

0 votes

I have a Vue component in my Laravel application.

I want to retrieve a URL that is in a config (or the .env Laravel file) directly in my Vue component, instead of hardcoding it. In webpack laravel mix I can retrieve my .env variable like this.

require('dotenv').config() let proxyUrl = process.env.APP_URL

But when I want to do this in my app.js, I have a can't resolve fs when trying to require dotenv.

What is the best way to have this data available in my Vue components ?

Jun 11, 2020 in Java-Script by kartik
• 37,490 points
4,399 views

1 answer to this question.

0 votes

Hello @kartik,

To access your env variables in a Vue Component file in Laravel, you will need to prefix your variable with MIX_.

In the .env file

To take your case as an example, if you intend to use APP_URL as a variable in your .env file, instead of APP_URL, you should use MIX_APP_URL like:

MIX_APP_URL=http://example.com

In your Vue Component file

You then access the variable by using the process.env object in your script like:

process.env.MIX_APP_URL

Say today you set a property named proxyUrl and assign the variable as its value, in your script in the .vue file, the code should look like:

export default {
  data () {
        return {
          proxyUrl: process.env.MIX_APP_URL,
        },
  }
}

After that you should be able to retrieve the property in your vue template as normal like:

<template>
    <div>

        //To print the value out
        <p>{{proxyUrl}}</p>

        // To access proxyUrl and bind it to an attribute
        <div :url='proxyUrl'>Example as an attribute</div>
    </div>
</template>

Hope this helps!!

answered Jun 11, 2020 by Niroj
• 82,560 points

Related Questions In Java-Script

0 votes
1 answer

How to get current date and time in JavaScript?

Hello @kartik, To get time and date you ...READ MORE

answered Sep 18, 2020 in Java-Script by Niroj
• 82,560 points
43 views
+1 vote
1 answer

How can we send message multiple time to a specific person or group in whatsapp using loop?

Hii @kartik,  This is simple task to send single ...READ MORE

answered Feb 28, 2020 in Java-Script by Niroj
• 82,560 points
1,370 views
0 votes
1 answer

How to print a circular structure in a JSON-like format?

Hello, You can use util.inspect(object) in node.js. It automatically ...READ MORE

answered Apr 24, 2020 in Java-Script by Niroj
• 82,560 points
656 views
0 votes
1 answer

How to run multiple npm scripts in parallel?

You should use npm-run-all (or concurrently, parallelshell), because it has more ...READ MORE

answered Apr 24, 2020 in Java-Script by Niroj
• 82,560 points
1,907 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,560 points
5,547 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,560 points
641 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,560 points
490 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,560 points
6,134 views
0 votes
1 answer

How to Store PHP variable with HTML in JavaScript in Laravel Blade Template?

Hello @kartik, The double curly brackets {{ }} will always ...READ MORE

answered Jun 11, 2020 in Java-Script by Niroj
• 82,560 points
5,855 views
0 votes
1 answer

How to adjust width and height of iframe to fit with content in it?

Hello @kartik, <script type="application/javascript"> function resizeIFrameToFitContent( iFrame ) { ...READ MORE

answered Sep 4, 2020 in Java-Script by Niroj
• 82,560 points
1,709 views