The Laravel News site has posted the second part of their tutorial covering the creation of a Laravel-based single page application with Vue.js. This latest tutorial picks up from part one and covers data loading and error handling.

In this tutorial, we continue Building a Vue single-page application (SPA) with Laravel by learning how to load async data from a Laravel API endpoint inside a Vue component. We will also look at error handling when an API response returns an error and how to respond in the interface.

[...] To keep the server-side data simple, our API will use fake data. In Part 3, we will convert the API to a controller with test data coming from a database.

The tutorial starts with the definition of a "users" API route and an update to the API route configuration to map the routes to the correct controllers. Next comes the frontend functionality to load in the user data with the addition of the "users" route to the current Vue.Router instance. The UsersIndex component is then added with the template and functionality to request the data from the backend API. Some final changes are made to the route handling and error handling is added for when the data loading has issues, relaying an error message back to the user.

On the Systems Architect blog there's a new post from Lukasz Kujawa about creating a simple API-based application combining Slim, Require.js and Backbone. The result is a single-page application that displays a template and a set of links pulled from the backend.

A single-page application (SPA) was something I’ve been exploring for the last few months. I always liked the idea of moving certain responsibilities to the client’s side. After all, why would you like to waste server’s RAM/CPU to buil a HTML page (and pay for a transfer to deliver it) when a web browser is perfectly capable of doing that on its own?

He's posted the full example to Github, but he does walk through all the code showing how the parts fit together. He starts with the HTML5 template and Javascript side of things, making a simple Backbone router and a "create" route. The views are rendered via the Lo-Dash templating and injected into the page.

As you can see it’s all quite simple. The only problem is that you have to embrace multiple JavaScript frameworks at once but the boilerplate makes it much easier. What I really like about this setup is the structure. It’s similar to how things are done in the back-end and it should be fine even with big applications.