I am starting to learn about Vue.js. I would like to know how to pass the blade variables into Vue.js?

Like

    return view('user.profile', ['locations' => $allLocations);

In which i can manipulate it through Vue.js?

Because I am planning on implementing a dynamic dropdown. Actually, there are two dropddowns. So whatever the user selects on the first dropdown, the second dropdown will display only specific options.

I already tried to implement it by 1.) hiding an elements an retrieving it through Javascript, or by 2.) using an HTTP AJAX request after page load to initialize the elements but I found this method a little bit messy or somewhat a resource hog. Is there any other implementations aside from what I mentioned above?

Thanks!

I am starting to learn about Vue.js. I would like to know how to pass the blade variables into Vue.js?

Like

    return view('user.profile', ['locations' => $allLocations);

In which i can manipulate it through Vue.js?

Because I am planning on implementing a dynamic dropdown. Actually, there are two dropddowns. So whatever the user selects on the first dropdown, the second dropdown will display only specific options.

I already tried to implement it by 1.) hiding an elements an retrieving it through Javascript, or by 2.) using an HTTP AJAX request after page load to initialize the elements but I found this method a little bit messy or somewhat a resource hog. Is there any other implementations aside from what I mentioned above?

Thanks!

• javascript
• laravel
• vue.js

• you can do that by passing variable with custom tags, e.g. <custom_tag :variable1="value"></custom_tag> and than you need to declare variable1 as props in you vue ponent – ankit patel Commented Mar 21, 2018 at 6:00

4 Answers 4

You can either implement these two ways to pass down the variables:

1. Pass the variables to view with JSON format

   <script>
       var app = <?=json_encode($locations)?>
   </script>
   

   See also: Displaying Data

2. Pass the variables by ajax request

   JS snippet (can place inside Vue mounted / created method)

   $.ajax({
       method: 'GET',
       url: '/api/locations',
       success: function (response) {
           // response.locations
       }
   });
   

   API Route (routes/api.php)

   Route::get('locations', 'LocationController@getLocations');
   

   LocationController

   public function getLocations() {
       ...
       return response()->json($locations);
   }
   

The easiest way to do it is to pass it to your views(where you have the vue ponent), and receiving it as a prop.

 return view('user.profile', ['locations' => $allLocations]);

and in your view:

<your-ponent :data="{{$allLocations}}></your-ponent>

and the vue ponent, along the line of this:

<template>
    --your HTML here--
</template>

<script>
    export default{

        props:['data'],

        data(){
            return{
                somethig:this.data.something
            }
        }
    }
</script>

This should get you started. furthermore, i would suggest you to learn more in the laravel docs, vue docs, laracasts etc.

Best of coding to you!

You can use Vue, Vuex, Axios

When use .vue, I think you don't need .blade

With Vue + Laravel:

1. Create App.vue in assets/js

2. Import App.vue in app.js (folder assets with Laravel 5.6)

3. You would like to pass the blade variables into Vue.js? Use JSON or XML. I love Json. So in Laravel Controller -> return json

4. In App.vue, you can use axios call to API (Use Laravel create 1 API in controller + route...) and You have all variables, you want :)

Help it help you. Thanks

i tried using the method to check my subscription and found it handy you:-

Vue.ponent('subscribe', require('./ponents/Subscribe.vue'));
const app = new Vue({
    el: '#app'
});

Try by going to the link :- enter link description here