The Scotch.io blog has posted a new tutorial for the Laravel+Vue.js users out there helping you effectively handle validation error messages output through the Vue.js portion of the application.

Recently, I launched a open source side project I was working on called Open Laravel. Open Laravel allows developers to submit open source projects that were built using the Laravel framework. The project submission page uses Vue.js to submit the form asynchronously through an AJAX request. Since I am no longer sending the form the default way (refreshing after form submission), I needed a way to show Laravel form validation error messages. After going back and forth with some forum questions and answers, I was able to make it work.

The tutorial starts you out with a fresh install of Laravel and runs a npm install to get the Laravel Elixir dependencies. They then add in the other dependencies (like Vue.js itself and the use-resource package). Next up are changes on the Laravel side: adding required routes, setting up a "Posts" controller and making a simple view with the form to take in post content. They provide the Javascript for the Vue.js side as well, making use of the vue-resource to connect the form with the POST request to the backend. Finally they tie in the "FormError" component and have it either show failure messages or success messages when everything's good.