Full-Stack Vue.js 2 and Laravel 5

Injecting data

Getting the mock-listing data into the client app will take several steps. We'll begin by converting the model to an array. The view helper can then be used to make the model available within the template at runtime.

routes/web.php:

Route::get('/listing/{listing}', function (Listing $listing) {
  $model = $listing->toArray();
  return view('app', [ 'model' => $model ]);
});

Now, in the Blade template, we'll create a script in the head of the document. By using double curly brackets, we can interpolate the model directly into the script.

resources/views/app.blade.php:

<head>
  ...
  <script type="text/javascript">
    console.log({{ $model[ 'id' ] }});
  </script>
</head>

If we now go to the /listing/5 route, we will see the following in ...