CRUD (Create, Read, Update and Delete) are the basic operations of data storage, and one of the first things you learn as a Laravel developer.
But what happens when you add a Vue.js single-page app as the frontend to this the stack? Suddenly you have to deal with asynchronous CRUD, since operations now occur without a page refresh. This will require special attention to ensuring the state of the data is consistent in both the front end backends.
In this tutorial, I’ll show you how to set up a full-stack Vue & Laravel app and demo each of the CRUD operations. AJAX is the key to this architecture, so we’ll use Axios as the HTTP client. I’ll also show you some strategies for dealing with the UX pitfalls of this architecture.
You can check out the finished product in this GitHub repo.
The demo full-stack app allows a user to create new “Cruds”, which I decided, after an incredible amount of creative thinking, are alien creatures with strange names and the ability to change from red to green and back.
The Cruds are shown on the main page, and the user has the power to create new Cruds, to delete them, or to update their color.
CRUD in the Laravel backend
We’ll begin the tutorial with the Laravel backend where the CRUD operations are fulfilled. I’ll keep this part brief as Laravel CRUD is a topic covered extensively elsewhere.
In summary, we will:
- Set up a database
- Set up RESTful API routes by using a Resource Controller
- Define methods in the controller to perform the CRUD operations
Firstly, the migration. Our Cruds have two properties: a name, and color which we store as text.