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.

Related Content you might be interested in

Current Title:

Small book image
Full-Stack Vue.js 2 and Laravel 5
Anthony Gore
Dec, 2017 | 376 pages
Small book image
Vue.js Quick Start Guide
Ajdin Imsirovic
Oct, 2018 | 186 pages
Small book image
Laravel 5 Essentials
Martin Bean
Apr, 2015 | 144 pages
Small book image
Vue.js 2 Web Development Projects
CHAU GUILLAUME
Nov, 2017 | 398 pages
Table of Contents (18 chapters)
Title Page
Title Page
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Preface
Preface
Free Chapter
1
Hello Vue – An Introduction to Vue.js
Hello Vue – An Introduction to Vue.js
Introducing Vue.js
Basic features
Advanced features
The Vue ecosystem
Case-study project
Summary
2
Prototyping Vuebnb, Your First Vue.js Project
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
3
Setting Up a Laravel Development Environment
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
4
Building a Web Service with Laravel
Building a Web Service with Laravel
Vuebnb room listings
Web service
Mock data
Database
Migration
Seeding mock listings
Listing model
Public interface
Images
Summary
5
Integrating Laravel and Vue.js with Webpack
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
6
Composing Widgets with Vue.js Components
Composing Widgets with Vue.js Components
Components
Image carousel
Composing with components
Communicating with components
Single-file components
Content distribution
Virtual DOM
Summary
7
Building a Multi-Page App with Vue Router
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
8
Managing Your Application State with Vuex
Managing Your Application State with Vuex
Flux application architecture
Vuex
Save feature
Moving page state into the store
Saved page
Summary
9
Adding a User Login and API Authentication with Passport
Adding a User Login and API Authentication with Passport
User model
Login system
Passing authentication state to the frontend
Retrieving saved items from the database
Persisting saved listings
API authentication
Summary
10
Deploying a Full-Stack App to the Cloud
Deploying a Full-Stack App to the Cloud
Heroku
Serving static assets
Reading from the CDN
Finale
Summary
Index
Index

Reading from the CDN

We now want Vuebnb to load any static assets from the CDN instead of the web server when in production. To do this, we're going to create our own Laravel helper method.

Currently, we reference assets in our app using the asset helper. This helper returns a fully-qualified URL for that asset's location on the web server. For example, in our app view we link to the JavaScript bundle file like this:

<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>

Our new helper, which we'll call cdn, will instead return a URL that points to the asset's location on the CDN:

<script type="text/javascript" src="{{ cdn('js/app.js') }}"></script>

CDN helper

Let's begin by creating a file called helpers.php. This will declare a new cdn method which, for now, won't do anything but return the asset helper method.

app/helpers.php:

<?php

if (!function_exists('cdn'))
{
  function cdn($asset)
  {
    return asset($asset);
  }
}

To ensure this helper is available...

Previous Section
End of Section 4
Next Section