Best practice to pass data from Laravel to Vue component

Question

This is my blade code

<div id="app">
  <Testcomponent bam-wam="ham" />
</div>

This is my VueJS Component code

<script>
    export default {
        name: "ExampleComponent",
        props: [
            'bamWam'
        ],
        data () {
            return {

            };
        },
        created() {
            console.log(this.bamWam);
        }
    }
</script>

Question is

This code runs good but I am asking what is better using Axios and Vuex to fetch data from my Laravel app or simply Pass data throw props like I did in this code?

Answer 1

Pass data through props is the best way.

<my-component my-data="yourData"></my-component>

If you want to use laravel variable for data from blade then,

<my-component my-data="'{{ $data->id }}'"></my-component>

<my-component :my-data="'{!! json_encode($data) !!}'"></my-component>

Avoid api call as much as possible. It will reduce the total number of request to server and expose fewer number of api endpoint.

Answer 2

If the data is available to the view where the component is added. Then the best way to pass php arrays from laravel to a vue component is to utilize json encoding like so:

<my-component :needed-data='@json($laravelCollection)'></my-component>

This will make you will be easily to perform actions to the php array in the Vue controller as if it was a JS object. Keep in mind that you have to use single quotes for @json.

For simple strings you can just directly pass it as props without the encoding.

This approach is better than creating a new API specifically for this component.

Answer 3

This was the only way that works for me:

<my-component :data="{{ $collection }}"></my-component>

JSON parsed solutions prints data in HTML.