Pass PHP array onto Vue component using props Pass PHP array onto Vue component using props vue.js vue.js

Pass PHP array onto Vue component using props


<Chart points='{!! json_encode($points) !!}'></Chart>

Just use singular quotes.


Although reading previous answers this took me a while to get working. So, here's what works for me with Laravel 5.5 and VueJs 2.5:

  1. Convert your PHP array to a JSON serialized string.

    For PHP arrays see json_encode.
    For Eloquent collections see the Eloquent method toJson.
    For further reference we call this new JSON string $arrayAsJSON.

  2. In your view (or Blade template):

    <some-vue-component :componentProperty="{{ $arrayAsJSON }}"></some-vue-component>
  3. The Vue Component:

    <template></template><script>  export default {    props: ['componentProperty'],    mounted() {        console.log('some-vue-component mounted.');        console.log(this.componentProperty)    },  }</script>


Starting with Laravel 5.5 you can use the @json directive.

<Chart points=@json($points)></Chart>