A glimpse at Drupal 8 and Vue.js combination
Vue.js: candidate for Drupal core
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 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