How do I pass data from a Laravel Blade file to a Vue instance?

Question

I have a *.blade.php file which sends a GET request to an API. This returns a *.xml file which I am able to parse into the data to be used within the *.blade.php file. How do I go about passing this information to a *.vue file within my application? I've tried passing the data as a prop, but it doesn't seem to work correctly. Is there a best practice to handle this type of task?

home.blade.php

<?php 
@extends('layouts.app')

// <PHP API REQUEST HERE>

$example = data stored from XML file;
?>

@section('content')

<app :example ="example"></app>

@endsection

app.vue

<template>
    <div>
{{ example }}
    </div>
</template>

<script>    
export default {    
    data() {
        return {    

        }
    },

    props: ['example']
}
<script>

Answer 1

There's a problem with your approach.

First of all, don't make HTTP requests in your blade files, do it in the controller, then pass data as variables to blade view('index', ['data' => 'array']) .

Second point: if you want to pass simple data from PHP to Javascript, use echo in a script, example:

<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>

Finally, for your particular case, you should have an API endpoint in Laravel that makes the HTTP request, and call it with an AJAX request from Vue JS.