A glimpse at Drupal 8 and Vue.js combination

The trend of using JavaScript frameworks with Drupal keeps gaining popularity. It is used for creating rich, fast, and interactive web interfaces. One of the hot use areas is decoupled (headless Drupal 8) architecture, with the front-end part completely entrusted to a JS framework. There are many JS frameworks and libraries that pair well with Drupal 8 — React, Angular, Gatsby, Ember, Elm etc. Today, we will review one of them, Vue.js. Let’s take a closer look at Drupal 8 and Vue.js combination.

Vue.js: candidate for Drupal core

Adopting JavaScript framework in Drupal core would improve the admin UX, according to Drupal creator Dries Buytaert, who spoke at DrupalCon Vienna in 2017. Core committers and developers with the relevant experience agreed they needed to think and choose the optimal JavaScript framework.

The main proposal was to choose React. However, another strong contender soon emerged as a candidate for Drupal core — Vue.js. Let’s take a closer look at this rising star.

Why Vue.js? The framework and its benefits

Vue.js is a progressive open-source JavaScript framework for building interfaces and single-page applications. It is often called a library, but the official version on the Vue.js website is a “framework”.

Vue.js was created by Google employee Evan You when he was working with Angular. Evan says he wanted to take the things he liked about Angular and create “something really lightweight.”

Since its creation in 2014, Vue.js has reached a 127,500+ star rating on GitHub and recently overpassed its counterpart React (122,000+ stars). The top 3 trending JS tools is completed with Angular (59,300+ stars). As we see, Vue demonstrates the most rapid growth.

The number of NPM downloads for Vue is 796,700+ each week. The growing popularity of Vue.js is explained by its benefits:

• lightweight and easy to learn for new developers
• clear and detailed documentation
• adoption within the PHP community (for example, Laravel framework has an out-of-box Vue support)
• active and helpful Vue.js community
• used by giants (Xiaomi, Netflix, Alibaba, Adobe, GitLab, parts of Facebook, WizzAir, EuroNews, Grammarly, Laracasts, Behance, Codeship, Reuters etc.)
• high performance due to two-way data binding and virtual DOM (like in Angular and React)
• even large aps are built with self-contained and often reusable Vue components

Drupal 8 and Vue.js combination

With the Drupal 8 and Vue.js combination, developers can enrich Drupal interfaces with reactive features with no jQuery, use ready Vue components, or build single-page applications that consume Drupal 8 data.

On the Drupal part, we need to prepare the content for REST export. For example, we can create a View, click “provide a REST export” in the View settings, and add a path. It works when the web services set of modules is enabled in Drupal core.

To set up a Vue.js application, we need to make sure we have Node and NPM installed, and then use the Vue CLI 3 tool. It does a lot of work for developers and that speeds up the processes. It automatically plugs in the selected libraries, configures the Webpack to optimize all files, provides app updates live every time you save changes, and so on. Finally, it offers a graphic user interface — Vue Project Manager.

The commands for starting a Vue.js application are:

• npm install -g @vue/cli
• vue init webpack projectname
• cd projectname
• npm install
• npm run dev

Then Vue router and Vue resource need to be added to the project. The main.js file is then configured to use Vue routers and Vue resources, the app.js is modified to work with the router, and app components and routers are set up.

Drupal 8 modules for working with Vue.js

There is an ecosystem of contributed Drupal modules for the Drupal 8 and Vue.js combination:

• Vue.js builds helps connect Drupal and Vue.js. It can be used in a Twig template, attach programmatically, or add as a dependency to a YAML file.
• Vue Views adds a new format to Drupal views so the results are displayed in Vue.js, which makes it possible to use Vue features like asynchronous loading etc.
• Webpack Vuejs provides Vue configuration for the Webpack bundler Drupal module, which helps developers bundle Drupal libraries by Webpack. 
• Decoupled blocks: Vue.js is the Vue.js version of the Decoupled Blocks module, which adds Vue.js blocks to websites via modules or themes.

Let’s combine Drupal 8 and Vue.js for you

We have taken a glimpse at the possibilities of a Drupal 8 and Vue.js combination. Our Drupal team is always on top of the latest JavaScript technologies. Contact us and we will help you choose the optimal one for you, and bring all your ideas to life.