Bringing Drupal 8 and Vue.js to the modern web
There are several reasons and approaches to decouple the presentation and data management of a Drupal website. For very large projects it can be useful to develop the UI including application logic and interfaces to the interfaces provided by Drupal for accessing the site content completely using reactive technologies, namely when the complexity of an application can no longer be addressed adequately without the help of such frameworks (this is one of the reasons). For smaller use cases the hybrid approach is more conceivable, according to certain parts of page endpoints in the user context to bring the content to presentation finally. Compared to the approach of complete decoupling, this approach is significantly less development and maintenance-intensive.
Efficient Implementation of Sophisticated Web Applications
In the modern Web, reactive frameworks such as Vue.js, React or Angular are indispensable when it comes to implementing sophisticated Web applications. In the context of decoupling, such frameworks also find their place in systems that actually have everything: Drupal 8 comes with Twig, a template engine, as well as jQuery, so that content can be – of course – loaded asynchronously and dynamically into themes or modules. Of course, even more complex applications could be realized with jQuery. But this is not a job that quickly bears fruit.
Website Project with Drupal, Bootstrap, and Vue.js
Live weather data display with
Drupal module, D3.js, and Vue.js
The Drupal module, which is being developed in this project, is used to display sophisticated live weather data from a special weather station. For this purpose, D3.js, which is also part of the bundle, is used to plot graphs as soon as new data is available. The necessary interfaces are provided by the module itself and are implemented in PHP (using Drupal APIs) so that the embedded Vue.js application can access new data via REST using HTTP clients such as Axios. Only the base framework is written in HTML, all other components are added to the page when the mini-app is run by Vue.js with its special kind of DOM manipulation (virtual DOM).