Progressive decoupling in action: using Vue.js to ...
summary
Demonstrates a real Drupal 8 site where Vue.js adds dynamic, app-like behavior to course pages: variant data lives in rendered HTML and is passed via Drupal settings to a small Vue app that uses v-model and computed properties, toggles visibility with V-show vs V-if, updates the URL, and lets editors keep a single canonical page to stop duplicate-content penalties. Uses a custom Twig macro (and Bamboo Twig) to wrap variant fields, no JSON API calls needed, swaps minified/dev builds via hook_library_info_alter, and runs in production with few bugs.
AI-written summary · about
chapters (20)
- 0:00Intro
- 1:28The continuum of decoupling
- 2:50With progressive decoupling
- 6:17What is Vue?
- 7:45A scale of framework footprint size
- 9:38Deal with data, not the DOM!
- 10:38Bonus use: a jQuery replacement!
- 11:00Toggling a class the jQuery way
- 11:21and the Vue way
- 12:42Easy-going learning curve
- 16:33No build procOSS
- 16:59Complementary with Drupal
- 17:47The problem
- 19:44The solution
- 23:04Passing data via drupalSettings
- 24:59How it works
- 26:48Showing variant data with a Twig macro
- 33:40Be careful with Twig
- 35:07Switching between development and prod Vue
- 35:37Theme debugging tip
related talks
53mDevelop from scratch and deploy to production, a decoupled Drupal 8 + VueJS site
38mThe Vue from up Here Scaling with a Progressive JS Framework
50mVue.js - Power and Flexibility
01h 03mVue.js is going to take the world
29mBuild highly dynamic apps with Vue.js
40mVue.js - developer friendly, fast and versatile
36mHow to Create 'Vuetiful' Data-Driven User Interfaces
57mProgressively Decoupled Drupal, for everyone!