Lately I've been building more things that use VueJS.
For me, it's the first JavaScript framework that has really clicked while also being a joy to use when compared to React and Angular 1.x.
Most of what I've built with Vue has been within a Laravel project. Laravel makes it easy to build RESTful APIs that you can consume within a single page JS app.
I was curious; could I do the same thing but instead use Craft as my back end rather than migrate content and users to a custom Laravel app?
My friend Paulo Elias and his team @ideo did just that with React where they consume Element API endpoints but all of the authoring is via the control panel.
What I wanted to achieve using just the front end was:
- display a list of entries served by the API endpoint (the app index)
- search entries by title
- show a single entry served by the API endpoint (the single view)
- register as a user
- authenticate as a registered user
- post an entry as an authenticated user
- delete entry of authenticated user
- update authenticated user info (the user profile)
- have routing handled by Vue and not Craft
So, in this series, I'll breakdown the approach I've taken, piece by piece.
I'll cover how I:
- setup the tooling using Laravel Mix as a build tool
- bootstrapped the Vue app
- used Vue Router to manage routing; overriding Craft's routing
- used Vuex to manage state; I needed this because I wanted a way to communicate my custom search Vue component
- configure endpoints using Element API mentioned above
- use Axios to consume the entries API
- execute Craft methods from Vue
Leave Your Comments