Vue.js ❤️ Craft CMS - Single Page App: Intro

Lately I've been building more things that use Vue.js.

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