Demo-project: Laravel 5.5 Passport API with Vue.js Client

While working internally with Laravel APIs and Vue.js, decided to create a sample open-source project to show how it all works together.

Here’s the repository: https://github.com/LaravelDaily/Laravel-Passport-API-Server-Client-Demo

There are two mini-projects inside of it:

  • Laravel 5.5 Passport-based Server project with database
  • Laravel 5.5 and Vue.js based Client project to connect to that Server and get the data

Readme contains quite simple installation instructions, and if it all works for you, you should see log in form and then authorization screen:

passport-client2

When authorized, you will get to the Projects list – basically, HTML table with data filled in by Vue.js calling Server’s API.

Here’s how it looks in the server’s database.

laravel passport server database

For client, we don’t even need the database – all the data is taken/manipulated on the server.

The goal of this project is to show you a simple mechanism how it all works, but you can adapt it to your needs, add different CRUDs and API calls instead of our demo Projects.

We hope it’s a useful starter tool to speed up your development process!

Link to the repository again: https://github.com/LaravelDaily/Laravel-Passport-API-Server-Client-Demo

Like our articles?
Check out our Laravel online courses!

9 COMMENTS

  1. Hi thanks for providing the passport tutorial. I followed the steps, but I am facing 401 error.

    GuzzleHttp \ Exception \ ClientException (401)
    Client error: `POST http://passport-server.dev/oauth/token` resulted in a `401 Unauthorized` response: {“error”:”invalid_client”,”message”:”Client authentication failed”}

    Same raised in Github.

    How to fix this issue?

    Help appreciated.

LEAVE A REPLY

Please enter your comment!
Please enter your name here