How to use Laravel helper functions with Vue? - laravel

Question

Iam bulding a multi-page app using Laravel and Vue.Now, for example lets say I want to use some Laravel helper function like {{ trans('messages.welcome') }} inside a Vue component (which is in a separate .vue file) .. how to do that ?

Answer 1

Access the Laravel helper function from your Blade template, passing the result to your Vue component as a prop:
// app.blade.php
<message-component :message="{{ trans('messages.welcome') }}"></message-component>
// MessageComponent.vue
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: [ 'message' ],
}
</script

Answer 2

In fact there is a way, kind of.
Inside data I called Laravel helper method with php tags. Code:
<script>
let app = new Vue({
el: '#app',
data: {
app_url: "<?php echo app_url(); ?>"
});
</script>

Answer 3

Here is another way to do what I believe #rook99
is trying to accomplish. This is working great for me.
Set up your Helper Functions in a a new folder in the app folder. I created a new folder in the app folder called CustomStuff. Then I set up a file called FormHelper.php . Add your Helper function to this file. This is the path to the Helper function file: app\CustomStuff\FormHelper.php
// This is my Helper Function. Create an array of states
public static function States()
{
$states =['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA',
'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MH', 'MD', 'MA', 'MI',
'MN', 'MS','MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH',
'OK', 'OR','PA', 'PR', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA',
'WV', 'WI', 'WY',];
return $states;
}
Set up a new controller. In the Controllers folder. Call it AppUtilityController Do not forget to add
use FormHelper;
at the top of the controller file. The following command in the command line will create the controller.
php artisan make:controller AppUtilityController
In the AppUtilityController add a function to be called from a root and return the Helper function data.
public function getHelperFunctions()
{
$data['states'] = FormHelper::States();
return $data;
}
set up a new route in your routes folder to call the getHelperFunctions
Route::get('/app-utilities/get-helper-functions',
'Admin\AppUtilityController#getHelperFunctions');
Next go to Vuejs component where you need the Helper Function.
Set up a function using created method so the function will get called when component loads.
Have the function make an api request to the url in the route. Which would be app-utilities/get-helper-functions. I am using axios to make the request.
The FormHelper functions will be returned as a javascript object. Simply use the object anywhere in the component.
In the future, whenever you want to add Helper function just add the new function to the FormHelper.php and AppUtilityController.php files and insert the method to grab the data in your Vuejs component.
I wrote a blog [post]: https://david.dukesnuz.com/blog/8/how-to-use-laravel-helper-functions-with-vuejs on this topic.

Answer 4

Just add script into blade template:
<script>
window.laravel_helper_result1 = '{{laravel_helper_function_1()}}';
window.laravel_helper_result2 = #json(laravel_helper_function_2());
</script>
Then you can use these js variables in your Vue.