Vue.js and Decoupling Drupal

Posts on a project page such as this one are sorted in ascending chronological order.

--

Project: Vue.js and Decoupling Drupal
Tags: Drupal 8, Vue.js, RESTful Web Services

Back in the February 2019 I started experimenting with decoupled Drupal and Vue.js. After a basic search I then decided to tag along with Ivan Dorić in One Page App With Drupal 8 and Vue.js. Although this 14 part series was already a bit dated (2016) I liked Ivan's casual tone and his user friendly approach which uses Drupal core's RESTful Web Services to create the API.

Fast-forward to today (09-2020), Vue.js 2.x has been out since 09-2016, Vue 3.x was released last month (09-2020) and JSON:API was committed to Drupal core on 03-2019 (drupal 8.7.0-beta1). Time to catch up.

After some quick thinking, I decide to update to Vue 2.x which I assume to be more stable and, more importantly, for which there's likely a lot more documentation available. Nothing wrong with making my life easier.

In his series, Ivan cuts to the chase - which I liked - and manually installed vue.js, vue-resource.js and router.js. Here's my plan going forward.

  1. Update to Vue 2.x, keep RESTful Web Services (manual Vue install)
  2. Update to Vue 2.x, keep RESTful Web Services but do a proper Vue install
  3. Update to 2.x and JSON:API

For now, you can still see the Vue.js 1.x app here. Note that it's sometime a bit slow to load because the API runs on a dev server that quickly falls asleep.

Project: Vue.js and Decoupling Drupal
Tags: Drupal 8, Vue.js, RESTful Web Services

This is a follow-up to: Vue.js and Decoupling Drupal » Update from Vue 1.x

The initial setup is from One Page App With Drupal 8 and Vue.js:

  • Vue.js 1.0.11
  • vue-resource.js v0.1.17
  • vue-router v0.7.7
  • app.js is where all the code is

Now trying to manually update the Vue.js app to:

  • Vue.js v2.6.12
  • vue-resource v1.5.1
  • vue-router v2.8.1

Of course, after applying these updates nothing works anymore. I need to find out what has changed since 2016, here's an incomplete list.

  • The Vue coding standards have evolved quite a bit since then.
  • Fortunately the Vue docs are quite helpful: Migration from Vue 1.x
    • ready replaced by mounted
    • Computed properties new
    • Replacing the filterBy Filter
    • etc.

In the end it was a slow process, a long series of small steps (iterations) that allowed me to update the code as well as the knowledge I had acquired the first time around. In time, I was able to display and filter the movies just like in the original 1.x app.

But I eventually put an end to this re-make when I realized that updating the implementation of the routing was going to be quite difficult because of the manual install. There is no point in trying to fix the code, it makes more sense to do this in the next step: Update to Vue 2.x, keep RESTful Web Services but do a proper Vue install.

For now, you can still see the Vue.js 1.x app here. Note that it's sometime a bit slow to load because the API runs on a dev server that quickly falls asleep.

To be continued…