Full-Stack Vue.js 2 and Laravel 5

Full-Stack Vue.js 2 and Laravel 5

by Anthony Gore
Released December 2017
Publisher(s): Packt Publishing
ISBN: 9781788299589

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Learn to build professional full-stack web apps with Vue.js and Laravel

About This Book

  • End-to-end guide on full-stack development with Vue.js 2 and Laravel 5
  • Developing modern user interfaces with a reusable component-based architecture
  • Use Webpack to improve applications performance and development workflow
  • Explore the features of Vuex to build applications that are powerful, consistent, and maintainable

Who This Book Is For

This book targets developers who are new to Vue.js, Laravel, or both, and are seeking a practical, best-practice approach to development with these technologies.

They must have some knowledge of HTML, CSS and Javascript.

What You Will Learn

  • Core features of Vue.js to create sophisticated user interfaces
  • Build a secure backend API with Laravel
  • Learn a state-of-the-art web development workflow with Webpack
  • Full-stack app design principles and best practices
  • Learn to deploy a full-stack app to a cloud server and CDN
  • Managing complex application state with Vuex
  • Securing a web service with Laravel Passport

In Detail

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.

Style and approach

Learn front-end Vue techniques, back-end Laravel skills, and put them together to build a working application

Table of contents

  1. Preface
    1. What this book covers
    2. What you need for this book
      1. Operating system
      2. Development tools
      3. Browser
        1. Vue Devtools
      4. IDE
      5. Hardware
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the example code
      2. Errata
      3. Piracy
      4. Questions
  2. Hello Vue – An Introduction to Vue.js
    1. Introducing Vue.js
    2. Basic features
      1. Installation
      2. Templates
      3. Directives
      4. Reactivity
      5. Components
    3. Advanced features
      1. Single-file components
      2. Module build
      3. Server-side rendering
    4. The Vue ecosystem
      1. Vue Devtools
      2. Vue Router
      3. Vuex
    5. Case-study project
      1. Vuebnb
      2. Code base
        1. Folders
    6. Summary
  3. Prototyping Vuebnb, Your First Vue.js Project
    1. Vuebnb prototype
      1. Project code
      2. NPM install
      3. Main files
      4. Opening in the browser
    2. Installing Vue.js
    3. Page content
      1. The Vue instance
      2. Data binding
      3. Mock listing
    4. Header image
      1. Style binding
      2. Directives
        1. Usage
        2. Expressions
        3. Example: v-if
        4. Arguments
      3. Style binding (continued)
    5. Lists section
      1. List rendering
      2. Icons
      3. Key
      4. Prices
    6. Show more feature
      1. Class binding
      2. Event listener
      3. Reactivity
        1. Getters and setters
        2. Reactive data properties
      4. Hiding the More button
    7. Image modal window
      1. Opening
      2. Window
      3. Disabling the main window
        1. Dimming the main window
        2. Preventing body scroll
          1. Vue's mount element
        3. Watchers
      4. Closing
        1. Escape key
        2. Event modifiers
        3. Lifecycle hooks
        4. Methods
          1. Proxied properties
          2. Removing listener
    8. Summary
  4. Setting Up a Laravel Development Environment
    1. Laravel
    2. Laravel and Vue
    3. Environment
      1. Homestead
    4. Vuebnb
      1. Project code
    5. Shared folders
    6. Terminal commands
    7. Environment variables
    8. Composer install
    9. Database
    10. Serving the project
      1. Local DNS entry
    11. Accessing the project
    12. Summary
  5. Building a Web Service with Laravel
    1. Vuebnb room listings
    2. Web service
    3. Mock data
    4. Database
    5. Migration
      1. Schema
      2. Execution
    6. Seeding mock listings
      1. Creating a seeder
        1. Loading the mock data
        2. Inserting the data
      2. Executing the seeder
    7. Listing model
      1. Eloquent ORM
      2. Casting
    8. Public interface
      1. Controller
    9. Images
      1. Accessing images
      2. Image links
    10. Summary
  6. Integrating Laravel and Vue.js with Webpack
    1. Laravel frontend
    2. JavaScript
      1. CSS
      2. Node modules
      3. Views
    3. Asset compilation
    4. Webpack
      1. Dependencies
      2. Modules
      3. Bundling
      4. Loaders
    5. Laravel Mix
    6. Running Webpack
      1. CLI
      2. First build
        1. JavaScript
        2. CSS
        3. Fonts
    7. Migrating Vuebnb
      1. Removing unnecessary dependencies and files
      2. HTML
        1. Syntax clash
      3. JavaScript
        1. Mock data dependency
        2. Displaying modules with Webpack
        3. Vue.js dependency
      4. CSS
        1. Font styles
      5. Fonts
      6. Images
    8. Development tools
      1. Watch mode
      2. BrowserSync
    9. ES2015
      1. Polyfills
    10. Mock data
      1. Routes
      2. Architecture
      3. Injecting data
      4. JSON
      5. Sharing data between scripts
      6. Replacing the hard-coded model
      7. Amenities and prices
      8. Image URLs
        1. Replacing the hard-coded image URLs
    11. Summary
  7. Composing Widgets with Vue.js Components
    1. Components
      1. Registration
      2. Data
    2. Image carousel
      1. Changing images
      2. Computed properties
    3. Composing with components
      1. Registration scope
      2. Carousel controls
    4. Communicating with components
      1. Props
        1. One-way data flow
      2. Dynamic props
      3. Image URLs
      4. Distinguishing carousel controls
      5. Custom events
      6. Changing carousel images
    5. Single-file components
      1. Transformation
      2. Refactoring components to SFCs
        1. CSS
        2. CarouselControl
    6. Content distribution
      1. Slots
      2. Modal window
      3. Refs
      4. Header image
      5. Feature lists
      6. Scoped slots
      7. Expandable text
    7. Virtual DOM
      1. Render functions
      2. Vue Loader
      3. Refactoring the main template as single-file component
      4. Mounting the root-level component with a render function
      5. Vue.js builds
        1. Module system
        2. Production builds
        3. Full build vs runtime-only
      6. Selecting a build
    8. Summary
  8. Building a Multi-Page App with Vue Router
    1. Single-page applications
    2. Routers
    3. Vue Router
      1. Special components
    4. Vuebnb routing
    5. Installing Vue Router
    6. Creating routes
    7. App component
    8. Home page
    9. Home route
      1. Initial state
        1. Refactoring
        2. Home page initial state
        3. Adding the thumbnail
        4. Receiving in the client
    10. ListingSummary component
    11. In-app navigation
      1. Adding a path to the model
      2. Route navigation guards
        1. next
      3. HomePage component
      4. Home API endpoint
      5. Axios
      6. Mixins
      7. Moving the solution to a mixin
        1. assignData
      8. Linking to the listing page
    12. Scroll behavior
    13. Adding a footer
      1. The route object
      2. Dynamically selecting the container class
    14. Listing summary image slider
      1. Adding the slider
      2. Translate
      3. Carousel controls
      4. Finishing touches
    15. Summary
  9. Managing Your Application State with Vuex
    1. Flux application architecture
      1. Principle #1 – Single source of truth
      2. Principle #2 – Data is read-only
      3. Principle #3 – Mutations are synchronous
    2. Vuex
      1. Installing Vuex
    3. Save feature
      1. ListingSave component
      2. Saved state
      3. Mutator method
      4. Changing the icon to reflect the state
      5. Adding to ListingPage
        1. Making ListingSave a button
    4. Moving page state into the store
      1. State and mutator methods
      2. Router
      3. Retrieving page state from Vuex
      4. Getters
      5. Checking if page state is in the store
    5. Saved page
      1. Toolbar links
    6. Summary
  10. Adding a User Login and API Authentication with Passport
    1. User model
      1. Migration
      2. Model
      3. Seeder
    2. Login system
      1. LoginPage component
      2. Server routes
      3. CSRF protection
      4. Post-login redirection
      5. Adding authentication links to the toolbar
      6. Protecting the saved route
    3. Passing authentication state to the frontend
      1.  auth meta property
      2. Responding to authenticated state
    4. Retrieving saved items from the database
    5. Persisting saved listings
      1. Creating an API route
      2. Vuex actions
      3. AJAX request
    6. API authentication
      1. OAuth
      2. Laravel Passport
      3. Attaching tokens
    7. Summary
  11. Deploying a Full-Stack App to the Cloud
    1. Heroku
      1. CLI
      2. Creating an app
      3. Source code
      4. Environment variables
      5. Creating a database
        1. Default string length
        2. Configuration
      6. Configuring a web server
      7. Passport keys
      8. Deployment
      9. Migration and seed
    2. Serving static assets
      1. Content distribution networks
      2. KeyCDN
      3. Uploading files with FTP
        1. Environment variables
        2. Skipping images
        3. NPM scripts
      4. Production build
      5. Running the FTP script
    3. Reading from the CDN
      1. CDN helper
      2. Setting the CDN URL
      3. Using the CDN in Laravel
      4. Using the CDN in Vue
      5. Deploying to Heroku
    4. Finale
      1. Recap
      2. Next steps
    5. Summary

Product information

  • Title: Full-Stack Vue.js 2 and Laravel 5
  • Author(s): Anthony Gore
  • Release date: December 2017
  • Publisher(s): Packt Publishing
  • ISBN: 9781788299589