Simple Way to Access Laravel Configs in Vue?

I'm using Laravel 8 & Vue 3, and I'm hoping to access select config settings from Laravel within Vue (specifically, I have a few route names referenced in configs that I'd like to be able to reference from within Vue)

Anyone have any recommendations?

Nakov

4 years ago

Level 73

Here is a blogpost on how you can use environment variables within VueJS: https://onur-kose.medium.com/laravel-with-vue-and-environmental-variables-8be093105c69

So basically prefix the variable with MIX_ and make sure you restart the watcher if you use it npm run watch or yarn watch and the value should be available in any Vue component using process.env.MIX_***

other solution will be if in your main layout you create an object that contains those values and share them with the window object before Vue is initialized.

So in a PHP file:

<script>
window.APP = {
    url: "{{ config('app.url') }}"
}
</script>

// to access you use APP.url

2 likes

cjholowatyj

4 years ago

Level 9

Thanks @nakov for the feedback! What I ended up doing, since I already have a few custom blade directives already, is I created another one with the following code (using the fortify config as an example):

<?php
Blade::directive('config',function(){
	$fortify=json_encode(config('fortify'),JSON_THROW_ON_ERROR);
	$message="<!-- Config --><script>window.config={};window.config.fortify = JSON.parse('$fortify')</script>";
	return $message;
});
?>

<html>
	<head>
		@config()
		...
	</head>
	<body>
		...
	</body>
</html>

This allowed me to inject entire arrays of config values into the window object which was super helpful! (Obviously I need to be very careful what scope I choose for the amount of config data being passed into the window object, as it is publicly visible).

Thanks again!

1 like

MooseSaid

3 years ago

Level 4

@cjholowatyj what does this code do? Is it allowing you to reach to a config files and variables? Like if I have some key in .env file and I referenced it in config, will I be able to reach out to it from vue components? If so, why don't you contribute this code to Laravel?

cjholowatyj

3 years ago

Level 9

@MooseSaid Turns out in the past 7 months the example I provided is no longer being used in my code, primarily because I've become much more comfortable with my InteriaJS setup, and anything I want to be able to use within Vue is easily passed into Vue pages as props via the HandleInertiaRequests middleware. From within that middleware, I use the Config facade to pull config values that reference .env values whenever I need them.

1 like

cjholowatyj

3 years ago

Level 9

@MooseSaid I also found that using directives for this issue gave me another problem... I'm running a multi-tenant SaaS application with Laravel/Inertia/Vue, and I found that this directive in particular was being cached in the view itself, and that was not a viable option for my caching setup.

1 like

Please or to participate in this conversation.