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 ?
-
laravel (PHP) is server side, and you can't use it directly into javascript You can create own trans() function in vuejs and import translations in json format– Ilya YaremchukJan 29, 2018 at 10:20
-
1As @IlyaYaremchuk correctly said its not possible to use them in VueJS. If your question is about how to translate your frontend I shameless advertise my blog post about this topic medium.com/@konafets/…– common senseJan 29, 2018 at 10:26
-
@btl The question was about using Laravels helper inside a Vue component ;-) Of course does your answer below works but how many props you want to pass to the component?– common senseJan 29, 2018 at 10:27
-
@common sense : I see . you mentioned inline-template in your blog post which will work perfect for me .. but isnt inline-templates considered as not best-practice ?– rook99Jan 29, 2018 at 10:34
-
I read that too somewhere but never read the reason why its considered so. But since its a usable feature of VueJS and it fits your needs, just use it :-)– common senseJan 29, 2018 at 11:13
4 Answers
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
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>
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.
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.