Using Vue.js in a Play Framework Application

Question

If anyone has experience using Vue.js as a frontend for a Play Framework application, I'd like to know the recommended approach.

My current setup is a Play application (in Java) with Models, Controllers, and DAOs for handling REST requests - this is effectively my backend. Now Play also lets you use the Twirl template library to create views that can be served as static HTML. However, I found the Twirl syntax needlessly complex and difficult to compose views for a single-page-app. I'd prefer using something more fine-tuned for UI work like Vue

My research shows two options for integrating Vue to Play:

1. Using Webjars:
   Its some sort of Play plugin that bundles JavaScript libraries like JQuery into .jar files that can be deployed by Play. Frankly, I don't understand the process and I have no idea how this would let me write my view in .vue files.

2. Using a separate Vue project loosely connected to the Play backend:
   This is my current outlook before posting this question. I suppose I could create a standard Vue Webpack project using the vue-cli and NPM, then I can call the Play backend APIs RESTfully. The problem with this is the additional complexity of deploying a backend and a frontend separately. I'd prefer everything in one Play application (project folder)--backend and frontend.

Which one of these is the way to go? I am also open to new suggestions. For any suggestions, please explain the advantages of that approach and preferably provide a minimal working example (a Github repo will suffice).

Thanks.

Answer 1

Here is a project that uses Play & Vue.js with WebJars: https://github.com/dreamhouseapp/dreamhouse-einstein-vision

Note that the project hasn't been updated to the latest Play.

Docs on using WebJars and Play are at: http://www.webjars.org/documentation

Answer 2

I've been trying to achieve the same thing and I've managed to find a few github repos with Play + Vue starter projects. play-vue-webpack looks like the best for my needs.

It couples Play on the backend with a webpack/webpack-dev-server setup on the front end with .vue components, hot module reloading etc. The webpack server is started by the sbt run hook so it's fairly seamless (although in my experience, stopping the server with CTRL+C only stops the backend and I've had to manually stop the node process separately).