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 Application10 min read
Installing And Configuring Laravel Socialite26 min read
Installing and Configuring Laravel Passport12 min read
Chapter 2: Set Up the Javascript
Configuring JS and SASS for a Single Page App16 min read
Structuring Vue 2, Vue Router, Vuex for a Single Page Application17 min read
Configuring Vue Router for a Single Page App13 min read
Add Laravel API End Points26 min read
Build Out API Requests in Javascript10 min read
Chapter 3: Get Started with Vuex, Vue Router, and JS API Requests
Build a Vuex Module28 min read
Using Vuex Modules Inside Components10 min read
Using SASS in Vue Components with Laravel Mix12 min read
Building a Page Layout for Vue Router10 min read
SPA Tutorial Progress Update5 min read
API Driven Form Submissions with Javascript, Vuex and Laravel18 min read
Validating an API request with Javascript and Laravel20 min read
Chapter 4: Adding some API Functionality
Geocode An Address With Google Maps11 min read
Displaying Resources on a Google Map With Vue JS22 min read
Custom Markers on Google Map5 min read
Custom Google Maps Info Windows4 min read
SPA Tutorial Update 25 min read
Chapter 5: Forms and Laravel Relationships and VueJS Tag Input
Many To Many Relationships With Laravel16 min read
Dynamic Forms with VueJS34 min read
Eloquent Parent Child Relationship in Laravel8 min read
Favoriting or Liking With Laravel and VueJS38 min read
Tagging With Laravel25 min read
Implementing the Vue JS Tag Component4 min read
Vue JS Tag input24 min read
SPA Tutorial Update 35 min read
Chapter 6: Working with VueJS Mixins
Filtering with VueJS Mixins41 min read
Re-using VueJS Mixins and Filtering Google Map Data26 min read
Customize Google Map Info Windows6 min read
Google Analytics with Vue Router in an SPA7 min read
SPA Tutorial Update 45 min read
Chapter 7: API and SPA Security
Public and Private API with Laravel8 min read
VueJS Route Security and Authentication14 min read
Vue Router Navigation Guards with Vuex12 min read
Chapter 8: Working with User Profiles and Permissions
Adding Laravel User Profiles22 min read
File Management with VueJS and Laravel21 min read
Chapter 9: New Designs
Roast Designs Have Been Updated9 min read
Animista CSS Animations with VueJS Transitions14 min read
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! Get Updates
Get Updates