14

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 ?

6
  • 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 Jan 29, 2018 at 10:20
  • 1
    As @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/… Jan 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? Jan 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 ?
    – rook99
    Jan 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 :-) Jan 29, 2018 at 11:13

4 Answers 4

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
0

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>
0

Here is another way to do what I believe @rook99

is trying to accomplish. This is working great for me.

  1. 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;
        }
    

  2. 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
  1. 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;
        }
    

  2. set up a new route in your routes folder to call the getHelperFunctions

    
        Route::get('/app-utilities/get-helper-functions', 
            'Admin\AppUtilityController@getHelperFunctions');
    

  3. 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.

  4. 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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.