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

This series 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 series 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 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 series!

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 mins 19 secs read
Installing And Configuring Laravel Socialite
Installing and Configuring Laravel Passport
Chapter 2: Set Up the Javascript
Configuring JS and SASS for a Single Page App16 mins 27 secs read
Structuring Vue 2, Vue Router, Vuex for a Single Page Application
Configuring Vue Router for a Single Page App
Add Laravel API End Points25 mins 40 secs read
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 JS22 mins 3 secs read
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 Laravel20 mins 35 secs read
Chapter 9: New Designs
Roast Designs Have Been Updated8 mins 57 secs read
Animista CSS Animations with VueJS Transitions14 mins 30 secs 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