How to create application boilerplate with Vert.x, VueJS, and OAuth2 in five steps

Thomas Reinecke
9 min readOct 25, 2018
VueJS + Vert.x + Keycloak

In this tutorial you will learn how to setup an application boilerplate based on Vert.x (Java) as a backend and VueJs as a frontend with a focus on User Authentication against Keycloak through OAuth2. Once a User is logged in, the vertx-vue-keycloak app also demonstrates how to query the Vert.x backend, send data (mutations) and how Publish/Subscribe works between Vert.x and VueJS.

The e2e code for this article is hosted on GH here.

Step 1 — Prep Work

Install KeyCloak

In this example we’re going to use Keycloak as Authentication and Authorization management provider. Keycloak is an open source identity and access management offering by RedHat, which provides OAuth2 and much more. Keycloak comes with a Web admin console to administrate the server. We can easily run it based on docker:

docker run -d — name keycloak -p 38080:8080 -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin -e KEYCLOAK_LOGLEVEL=DEBUG jboss/keycloak

--

--

Thomas Reinecke

Entrepreneur & Chief Architect at IBM, Personal Investor & Writer about entrepreneurship, finance, and technology. I am here to help you succeed.