API Driven Development With Laravel and VueJS

Learn to build a scalable application with re-useable code for web, mobile, and desktop. Now updated for Laravel 5.6.

About this course

** Now updated for Laravel 5.6! **

This course will go through each step of building a single page application from the ground up. We will be using Laravel configured with Passport and Socialite for the API backend and VueJS for the single page application front end. Throughout this tutorial we will be building an application called Roast. Roast helps the coffee enthusiast find their next cup of coffee based on a set factors such as location, brew method, roaster, etc. This course will be 100% open source. All code for our application can be found here: https://github.com/serversideup/roastandbrew. Every feature added to the application will include a tutorial in this course. You can view the final application here: https://roastandbrew.coffee and soon download a mobile app. If you like the tutorial, sign up for our mailing list ServerSideUp Mailing List, we are writing a book on API Driven Development and will dive in a lot deeper to the process. As always, feel free to ask questions as you work through the course!

What you'll learn
  • - Proper API Structure
  • - How to consume your own API from Web, Mobile, Desktop
  • - The VueJS Ecosystem (Vue-Router, Vuex, VueJS)

Want to learn more about API Driven App Development?

We're writing a book on API Driven App Development. Be the first to know once it is ready!

Table of Contents

Chapter 1: Set Up the API
Installing and Configuring Laravel For a Single Page Application
Installing And Configuring Laravel Socialite
Installing and Configuring Laravel Passport
Chapter 2: Set Up the Javascript
Configuring JS and SASS for a Single Page App
Structuring Vue 2, Vue Router, Vuex for a Single Page Application
Configuring Vue Router for a Single Page App
Add Laravel API End Points
Build Out API Requests in Javascript
Chapter 3: Get Started with Vuex, Vue Router, and JS API Requests
Build a Vuex Module
Using Vuex Modules Inside Components
Using SASS in Vue Components with Laravel Mix
Building a Page Layout for Vue Router
SPA Tutorial Progress Update
API Driven Form Submissions with Javascript, Vuex and Laravel
Validating an API request with Javascript and Laravel
Chapter 4: Adding some API Functionality
Geocode An Address With Google Maps
Displaying Resources on a Google Map With Vue JS
Custom Markers on Google Map
Custom Google Maps Info Windows
SPA Tutorial Update 2
Chapter 5: Forms and Laravel Relationships and VueJS Tag Input
Many To Many Relationships With Laravel
Dynamic Forms with VueJS
Eloquent Parent Child Relationship in Laravel
Favoriting or Liking With Laravel and VueJS
Tagging With Laravel
Implementing the Vue JS Tag Component
Vue JS Tag input
SPA Tutorial Update 3
Chapter 6: Working with VueJS Mixins
Filtering with VueJS Mixins
Re-using VueJS Mixins and Filtering Google Map Data
Customize Google Map Info Windows
Google Analytics with Vue Router in an SPA
SPA Tutorial Update 4
Chapter 7: API and SPA Security
Public and Private API with Laravel
VueJS Route Security and Authentication
Vue Router Navigation Guards with Vuex
Chapter 8: Working with User Profiles and Permissions
Adding Laravel User Profiles
File Management with VueJS and Laravel
Chapter 9: New Designs
Roast Designs Have Been Updated
Animista CSS Animations with VueJS Transitions
Chapter 10: Building an Administration Section
Planning your Laravel and VueJS SPA Application Admin Section
Laravel Gates and Policies in an API Driven SPA
Laravel Admin Routes and Security in a SPA
Sorting in VueJS Components and Vuex State
VueJS Route Permissions, Security and Admin Section
VueJS App Admin Screens
Vue Router Permission Recipes and Laravel Policies Examples
Sorting in VueJS Components and Vuex State