Building Laravel and Vue.js Web Apps

Learn how to use Vue.js and Laravel to create elegant, full-stack web applications. Discover how to build an embedded SPA with Vue Router, manage state complexity with Vuex, and more.

Introduction

• Laravel and Vue.js: Achieving full-stack elegance
• What you should know
• Demo project overview

1. Installation and Configuration

• Installing Homestead
• Configuring and booting the virtual machine
• Scaffolding an authentication system
• Enabling forgotten password and email verification
• Using webpack with Laravel Mix
• Cache busting and Browsersync

2. MV* Architectures

• Integrating a layout
• Creating a model and seeding the database
• Building views with Blade templates
• Injecting props in Vue components
• Building a CRUD component
• Managing scrolling and focus
• Protecting routes and models with policies
• Building an API with Laravel Passport
• Calling an API from Vue

3. Building an Embedded SPA

• Protecting admin pages with gates
• Installing and configuring Vue Router
• Using props and router-link
• Enabling Vue Router history mode
• Validating form submissions
• Displaying model validation errors
• Managing file uploads
• Working with related models
• Building a list view with detail links
• Reusing form components
• Using Laravel form requests
• Using Vue Router navigation guards

4. Managing State Complexity

• Understanding Vuex and Flux architecture
• Installing Vuex and managing the store
• Handling form input with Vuex
• Dispatching Vuex actions
• Using the mapState helper
• Rendering the menu

Conclusion

• Next steps