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

By:

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

Want to generate Laravel adminpanel online?
You don't need any packages to do that!

8 thoughts on “Demo-project: Laravel 5.5 Passport API with Vue.js Client”

  2. 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.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Or, you can subscribe without commenting.