Full-Stack Vue.js 2 and Laravel 5 by Gore, Anthony -- Read -- Imperial Library of Trantor

Index

Title Page Copyright

Full-Stack Vue.js 2 and Laravel 5

Credits About the Author About the Reviewer www.PacktPub.com

Why subscribe?

Customer Feedback Preface

What this book covers What you need for this book

Operating system Development tools Browser

Vue Devtools

IDE Hardware

Who this book is for Conventions Reader feedback Customer support

Downloading the example code Errata Piracy Questions

Hello Vue – An Introduction to Vue.js

Introducing Vue.js Basic features

Installation Templates Directives Reactivity Components

Advanced features

Single-file components Module build Server-side rendering

The Vue ecosystem

Vue Devtools Vue Router Vuex

Case-study project

Vuebnb Code base

Folders

Summary

Prototyping Vuebnb, Your First Vue.js Project

Vuebnb prototype

Project code NPM install Main files Opening in the browser

Installing Vue.js Page content

The Vue instance Data binding Mock listing

Header image

Style binding Directives

Usage Expressions Example: v-if Arguments

Style binding (continued)

Lists section

List rendering Icons Key Prices

Show more feature

Class binding Event listener Reactivity

Getters and setters Reactive data properties

Hiding the More button

Image modal window

Opening Window Disabling the main window

Dimming the main window Preventing body scroll

Vue's mount element

Watchers

Closing

Escape key Event modifiers Lifecycle hooks Methods

Proxied properties Removing listener

Summary

Setting Up a Laravel Development Environment

Laravel Laravel and Vue Environment

Homestead

Vuebnb

Project code

Shared folders Terminal commands Environment variables Composer install Database Serving the project

Local DNS entry

Accessing the project Summary

Building a Web Service with Laravel

Vuebnb room listings Web service Mock data Database Migration

Schema Execution

Seeding mock listings

Creating a seeder

Loading the mock data Inserting the data

Executing the seeder

Listing model

Eloquent ORM Casting

Public interface

Controller

Images

Accessing images Image links

Summary

Integrating Laravel and Vue.js with Webpack

Laravel frontend JavaScript

CSS Node modules Views

Asset compilation Webpack

Dependencies Modules Bundling Loaders

Laravel Mix Running Webpack

CLI First build

JavaScript CSS Fonts

Migrating Vuebnb

Removing unnecessary dependencies and files HTML

Syntax clash

JavaScript

Mock data dependency Displaying modules with Webpack Vue.js dependency

CSS

Font styles

Fonts Images

Development tools

Watch mode BrowserSync

ES2015

Polyfills

Mock data

Routes Architecture Injecting data JSON Sharing data between scripts Replacing the hard-coded model Amenities and prices Image URLs

Replacing the hard-coded image URLs

Summary

Composing Widgets with Vue.js Components

Components

Registration Data

Image carousel

Changing images Computed properties

Composing with components

Registration scope Carousel controls

Communicating with components

Props

One-way data flow

Dynamic props Image URLs Distinguishing carousel controls Custom events Changing carousel images

Single-file components

Transformation Refactoring components to SFCs

CSS CarouselControl

Content distribution

Slots Modal window Refs Header image Feature lists Scoped slots Expandable text

Virtual DOM

Render functions Vue Loader Refactoring the main template as single-file component Mounting the root-level component with a render function Vue.js builds

Module system Production builds Full build vs runtime-only

Selecting a build

Summary

Building a Multi-Page App with Vue Router

Single-page applications Routers Vue Router

Special components

Vuebnb routing Installing Vue Router Creating routes App component Home page Home route

Initial state

Refactoring Home page initial state Adding the thumbnail Receiving in the client

ListingSummary component In-app navigation

Adding a path to the model Route navigation guards

HomePage component Home API endpoint Axios Mixins Moving the solution to a mixin

assignData

Linking to the listing page

Scroll behavior Adding a footer

The route object Dynamically selecting the container class

Listing summary image slider

Adding the slider Translate Carousel controls Finishing touches

Summary

Managing Your Application State with Vuex

Flux application architecture

Principle #1 – Single source of truth Principle #2 – Data is read-only Principle #3 – Mutations are synchronous

Vuex

Installing Vuex

Save feature

ListingSave component Saved state Mutator method Changing the icon to reflect the state Adding to ListingPage

Making ListingSave a button

Moving page state into the store

State and mutator methods Router Retrieving page state from Vuex Getters Checking if page state is in the store

Saved page

Toolbar links

Summary

Adding a User Login and API Authentication with Passport

User model

Migration Model Seeder

LoginPage component Server routes CSRF protection Post-login redirection Adding authentication links to the toolbar Protecting the saved route

Passing authentication state to the frontend

auth meta property Responding to authenticated state

Retrieving saved items from the database Persisting saved listings

Creating an API route Vuex actions AJAX request

API authentication

OAuth Laravel Passport Attaching tokens

Summary

Deploying a Full-Stack App to the Cloud

Heroku

CLI Creating an app Source code Environment variables Creating a database

Default string length Configuration

Configuring a web server Passport keys Deployment Migration and seed

Serving static assets

Content distribution networks KeyCDN Uploading files with FTP

Environment variables Skipping images NPM scripts

Production build Running the FTP script

Reading from the CDN

CDN helper Setting the CDN URL Using the CDN in Laravel Using the CDN in Vue Deploying to Heroku

Finale

Recap Next steps

Summary

← Prev
Back
Next →

← Prev
Back
Next →