June 16, 2017

VueJS ❤️ Craft CMS - Single Page App: Intro

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