API Driven Development With Laravel and VueJS

Introduction

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.

Pre-requisites

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

Tutorials

1. Installing and Configuring Laravel For a Single Page Application
2. Installing And Configuring Laravel Socialite
3. Installing and Configuring Laravel Passport
4. Configuring JS and SASS for a Single Page App
5. Structuring Vue 2, Vue Router, Vuex for a Single Page Application
6. Configuring Vue Router for a Single Page App
7. Add Laravel API End Points
8. Build Out API Requests in Javascript
9. Build a Vuex Module
10. Using Vuex Modules Inside Components
11. Building a Page Layout for Vue Router
12. SPA Tutorial Progress Update
13. Using SASS in Vue Components with Laravel Mix
14. API Driven Form Submissions with Javascript, Vuex and Laravel
15. Validating an API request with Javascript and Laravel
16. Geocode An Address With Google Maps
17. Displaying Resources on a Google Map With Vue JS
18. Custom Markers on Google Map
19. Custom Google Maps Info Windows
20. SPA Tutorial Update 2
21. Many To Many Relationships With Laravel
22. Dynamic Forms with VueJS
23. Eloquent Parent Child Relationship in Laravel
24. Favoriting or Liking With Laravel and VueJS
25. Tagging With Laravel
26. Implementing the Vue JS Tag Component
27. Vue JS Tag input
28. SPA Tutorial Update 3
29. Filtering with VueJS Mixins
30. Re-using VueJS Mixins and Filtering Google Map Data
31. Customize Google Map Info Windows
32. Google Analytics with Vue Router in an SPA
33. SPA Tutorial Update 4
34. Public and Private API with Laravel
35. VueJS Route Security and Authentication
36. Vue Router Navigation Guards with Vuex
37. Adding Laravel User Profiles
38. File Management with VueJS and Laravel