Mock data

We've now completely migrated the Vuebnb prototype into our Laravel project, plus we've added a build step. Everything in the frontend app is working as it was in Chapter 2, Prototyping Vuebnb, Your First Vue.js Project.

However, we still have mock data hard-coded into the frontend app. In this last part of the chapter, we're going to remove that hard-coded data and replace it with data from the backend.

Routes

Currently, the home route, that is, /, loads our frontend app. But what we've built for our frontend app so far is not meant to be a home page! We'll be building that in future chapters.

What we've built is the listing page, which should be at a route like /listing/5, where 5 is the ID of the mock data listing being used.

Page	Route
Home page	/
Listing page	/listing/{listing}

Let's modify the route to reflect this.

routes/web.php:

<?php

use App\Listing;

Route::get('/listing/{listing}', function ($id) {
  return view('app');
});

Just like in our api/listing/{listing} route, the dynamic...