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…