Home page

Let's start work on our home page now. We'll first create a new component, HomePage:

$ touch resources/assets/components/HomePage.vue

For now, let's add placeholder markup to the component before we set it up properly.

resources/assets/components/HomePage.vue:

<template>
  <div>Vuebnb home page</div>
</template>

Be sure to import this component in the router file, and uncomment the route where it's used.

resources/assets/js/router.js:

....

import HomePage from '../components/HomePage.vue';
import ListingPage from '../components/ListingPage.vue';

export default new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: HomePage },
    { path: '/listing/:listing', component: ListingPage }
  ]
});

Note

You might be tempted to test this new route out by putting the URL http://vuebnb.test/ into your browser address bar. You'll find, though, that it results in a 404 error. Remember, we still haven't created a route for this on our server. Although Vue...