Laravel Vue Sample for StackOverflow user

app.js

// you should have imports for 
// Vue, axios, bootstrap, and anything else first

// ...
// ...

// check the directory to make sure yours matches this or update accordingly
Vue.component('app', require('./components/App.vue').default);

// define your root Vue element
const root = new Vue({
    el: '#root',
});

App.vue

<template>
    <div>
    
        <!-- Display results -->
        <h1 v-for="(result, index) in results">
            Result {{ result.id }} name: {{ result.name }}
        </h1>
        <!-- End Display results -->
         
    </div>
</template>

<script>
    export default {
        name: "App",
        data() {
            return {
                results: [],
            }
        },
        mounted() {
            axios.get('/data')
                .then(response => {
                    console.log(response);
                    this.results = response.data;
                })
                .catch(errors => {
                    console.log(errors);
                });
        }
    }
</script>

<style scoped>

</style>

index.blade.php

@extends('layouts.app')

@section('content')

  <!-- Vue root -->
  <div id="root">
  
      <!-- Vue component -->
      <app></app>
      <!-- End Vue component -->
      
  </div>
  <!-- End Vue root -->
  
@endsection

web.php

<?php

// you would want to use controllers 
// for your logic once you get things working


// your HTML application
Route::get('/',function() {
    return view('index');
});

// your request for a JSON response
Route::get('/data',function() {
    return response()->json([
      [
        'id' => 1,
        'name' => 'Laravel',
      ],
      [
        'id' => 2,
        'name' => 'Vue.js',
      ],
    ], 200);
});