Schau vorbei!
sciencentric AG
Beckbuschstraße 22a
40474 Düsseldorf
Folge uns!
All posts

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.

Reaktive Frameworks und Decoupling

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.

sciencentric AG

Website Project with Drupal, Bootstrap, and Vue.js

We, the sciencentric AG, have now taken the lead in a website project and developed a Drupal 8 theme in Twig as well as a Drupal module. In this case, the Drupal theme is based on our own Bootstrap 4 distribution. Both components of the website have a JavaScript part, which could have been realized with jQuery with much more complexity. Therefore we decided to use Vue.js instead of including jQuery. Vue is a modern, reactive framework.

JavaScript Development with Vue.js and Essential Build Tools

Those, who know React or Angular will find many paradigms united in Vue.js. So instead of Vanilla JavaScript or JavaScript with jQuery we write JavaScript – more precisely: ECMAScript 6 – with Vue.js. As build tools we use the usual suspects from the web developer scene: Node.js (as runtime), gulp.js, webpack, Babel. The use of these tools allows us to comfortably use all features of the Vue.js framework (for example the integrated template compiler or single file components). With webpack and Babel, an app bundle can be generated that contains transposed JavaScript to be executed even by browsers that do not yet understand ES6.

Drupal + Vue.js

Live weather data display with
Drupal module, D3.js, and Vue.js

The Development

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).


With this approach, we succeeded in using the very good (and very extensible) Drupal 8 as the base for content management in a very affordable timeframe, to dispense jQuery, instead using a modern, progressive JavaScript framework and our own components elegantly and sustainably.


Make an appointment now

Do you have questions, comments, or a problem that can be solved with software? We will be glad to meet you personally. Leave your details and we will get back to you as soon as possible.


Auf dieser Website werden Cookie verwendet. Diese werden für den Betrieb der Website benötigt oder helfen uns dabei, die Website zu verbessern.
Alle Cookies zulassen
Auswahl speichern
Individuelle Einstellungen
Individual settings
This is an overview of all cookies used on the website. You have the option to make individual cookie settings. Give your consent to individual cookies or entire groups. Essential cookies cannot be disabled.
Essential (1)
Essential cookies are needed for the basic functionality of the website.
Show cookies
Statistics (1)
Statistics cookies track the user and associated browsing behavior to improve the user experience.
Show cookies