Book Overview & Buying
Table Of Contents
Feedback & Rating

Full-Stack Vue.js 2 and Laravel 5

By : Anthony Gore

4.5 (15)

Buy this Book

Full-Stack Vue.js 2 and Laravel 5

4.5 (15)

By: Anthony Gore

Buy this Book

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.

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

Hello Vue – An Introduction to Vue.js

Introducing Vue.js

Basic features

Advanced features

The Vue ecosystem

Case-study project

Summary

Prototyping Vuebnb, Your First Vue.js Project

Vuebnb prototype

Installing Vue.js

Page content

Header image

Lists section

Show more feature

Image modal window

Summary

Setting Up a Laravel Development Environment

Laravel

Laravel and Vue

Environment

Vuebnb

Shared folders

Terminal commands

Environment variables

Composer install

Database

Serving the project

Accessing the project

Summary

Building a Web Service with Laravel

Vuebnb room listings

Web service

Mock data

Database

Migration

Seeding mock listings

Listing model

Public interface

Images

Summary

Integrating Laravel and Vue.js with Webpack

Laravel frontend

JavaScript

Asset compilation

Webpack

Laravel Mix

Running Webpack

Migrating Vuebnb

Development tools

ES2015

Mock data

Summary

Composing Widgets with Vue.js Components

Components

Image carousel

Composing with components

Communicating with components

Single-file components

Content distribution

Virtual DOM

Summary

Building a Multi-Page App with Vue Router

Single-page applications

Routers

Vue Router

Vuebnb routing

Installing Vue Router

Creating routes

App component

Home page

Home route

ListingSummary component

In-app navigation

Scroll behavior

Adding a footer

Listing summary image slider

Summary

Managing Your Application State with Vuex

Flux application architecture

Vuex

Save feature

Moving page state into the store

Saved page

Summary

Adding a User Login and API Authentication with Passport

User model

Passing authentication state to the frontend

Retrieving saved items from the database

Persisting saved listings

API authentication

Summary

Deploying a Full-Stack App to the Cloud

Heroku

Serving static assets

Reading from the CDN

Finale

Summary

Customer Reviews

4.5 (15)

5 star

80%

4 star

6.7%

3 star

6.7%

2 star

1 star

6.7%

Building a Multi-Page App with Vue Router

In the last chapter, we learned about Vue.js components and converted Vuebnb to a component-based architecture. Now that we've done this, we can easily add new pages to our app using Vue Router.

In this chapter, we'll create a home page for Vuebnb, including a gallery of clickable thumbnails that showcase the full set of mock listings.

Topics covered in this chapter:

An explanation of what router libraries are and why they are a critical part of single-page applications
An overview of Vue Router and its main features
Installation and basic configuration of Vue Router
Using the RouterLink and RouterView special components to manage page navigation
Setting up AJAX with Vue to retrieve data from the web service without a page refresh
Using route navigation guards to retrieve data before a new page is loaded

...