API Driven Development With Laravel and VueJS

Learn to build a scalable application with re-useable code for web, mobile, and desktop

About this series

I’ve recently had the opportunity to build a few single page applications using Laravel and VueJS and was blown away by the tools available to make this a possibility. I’ve been developing for awhile now and built a single page app before modern front end frameworks such as AngularJS, VueJS and React were available. It was a huge pain. When I was tasked to build another one, I wasn’t pleased. However, the more research I did, and having some experience with VueJS I was blown away with the simplicity of the application. Throw Laravel at the backend duties and you will want to build a single page application. Laravel Passport sets up an out of the box oAuth server ready to be consumed by your front end javascript application. All it takes is a little configuration and you are ready to rock and roll. Hopefull this tutorial will help resolve any questions regarding API Driven Development.

Before I kick off this series, I want to explain the background of what we are building. I’m a coffee fanatic and I’m always looking for the newest micro roast or specialty brew to try. In this series we will be building an application to help coffee-holics find their fix. We will be implementing Google Maps, some GIS, a few social aspects, user submission process, and a whole bunch of cool features ending with a mobile app at the end. I like to approach app development with the mindset of “begin with the end in mind”. Ask yourself, what do you want to build? It will help motivate and keep the momentum going. I definitely have more than enough ideas for loads of tutorials, so hopefully you will enjoy the ride and please, please provide feedback and updates.

This tutorial 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 series. You can view the final application here: https://roastandbrew.coffee and soon hopefully 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 progress.

A mobile app you ask? Well that brings me to the next point of why a single page application and API driven. I’ll start with the API driven. The reason I like to develop API driven applications is because the data is consumable from practically anywhere whether you write the code or someone else does. This is HUGE for scaling purposes and code maintainability. With Laravel and Laravel Passport the process of setting up a secure oAuth server is insanely easy: https://laravel.com/docs/5.4/passport.

I chose VueJS for the setting up of the Single Page Application on the front end because I believe it is by far, hands down the most elegant javascript front end framework available. It’s super easy to learn (check out https://laracasts.com/series/learn-vue-2-step-by-step ), pick up, and implement. The main reason I’m writing this as a single page application and not just an API driven “normal” application is the ability to transfer it to a hybrid mobile app. Once I figured out how to do a few little tweaks you are able to literally copy and paste 99% of your code and you have a mobile application ready for the app store.

I’m looking forward to writing this tutorial series. It can be consumed in a modular way and tweaked to what you want, but this is my approach. The articles are in the order I published them, but feel free to jump around to what you need and of course ask questions as needed.


A functioning webserver with the ability to install Laravel 5.4 https://laravel.com/docs/5.4/installation.

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
Building a Page Layout for Vue Router
SPA Tutorial Progress Update
Using SASS in Vue Components with Laravel Mix
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
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