Server Side Up Logo
Open mobile menu

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.

Start Course →
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)
Build better software and get user feedback directly in GitHub, GitLab, and more.

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 →

Table of Contents

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