Book Image

Full-Stack Vue.js 2 and Laravel 5

By : Anthony Gore
Book Image

Full-Stack Vue.js 2 and Laravel 5

By: Anthony Gore

Overview of this book

Vue is a JavaScript framework that can be used for anything from simple data display to sophisticated front-end applications and Laravel is a PHP framework used for developing fast and secure web-sites. This book gives you practical knowledge of building modern full-stack web apps from scratch using Vue with a Laravel back end. In this book, you will build a room-booking website named "Vuebnb". This project will show you the core features of Vue, Laravel and other state-of-the-art web development tools and techniques. The book begins with a thorough introduction to Vue.js and its core concepts like data binding, directives and computed properties, with each concept being explained first, then put into practice in the case-study project. You will then use Laravel to set up a web service and integrate the front end into a full-stack app. You will be shown a best-practice development workflow using tools like Webpack and Laravel Mix. With the basics covered, you will learn how sophisticated UI features can be added using ES+ syntax and a component-based architecture. You will use Vue Router to make the app multi-page and Vuex to manage application state. Finally, you will learn how to use Laravel Passport for authenticated AJAX requests between Vue and the API, completing the full-stack architecture. Vuebnb will then be prepared for production and deployed to a free Heroku cloud server.
Table of Contents (11 chapters)

Seeding mock listings


Now that we have a database table for our listings, let's seed it with the mock data. To do so we're going to have to do the following:

  1. Load the database/data.json file
  2. Parse the file
  3. Insert the data into the listings table

Creating a seeder

Laravel includes a seeder class that we can extend called Seeder. Use this Artisan command to implement it:

$ php artisan make:seeder ListingsTableSeeder

When we run the seeder, any code in the run method is executed.

database/ListingsTableSeeder.php:

<?php

use Illuminate\Database\Seeder;

class ListingsTableSeeder extends Seeder
{
  public function run()
  {
    //
  }
}

Loading the mock data

Laravel provides a File facade that allows us to open files from disk as simply as File::get($path). To get the full path to our mock data file we can use the base_path() helper function, which returns the path to the root of our application directory as a string.

It's then trivial to convert this JSON file to a PHP array using the built-in json_decode...