Drupal 8 and Vue.js: How to Add Rich Client Functionality to Your Drupal Projects

Drupal 8 and Vue.js: How to Add Rich Client Functionality to Your Drupal Projects

Just face it: you'll need to gradually let go of... Drupal's good old jQuery! And to team up with a more modern, reactive framework. One perfectly equipped to help you meet users' expectations: dynamic, interactive... richer web experiences. In this respect, Drupal 8 and Vue.js make the right combo for adding rich client-side behavior to your Drupal projects.

And it's this very integration of Vue.js into your Drupal projects that I'll be focusing on in this post.

Therefore, if this duo's potential has been stirring your curiosity for some time now, expect to find the answers to some of your (legitimate) questions:

  • Which are the “signals” pointing out that jQuery can't “shine” on the interactive web apps' scene?
  • Why specifically Vue.js? From all the other popular JS frameworks out there?
  • How to Get Started With Vue.js and Drupal 8?
  • What Tools Should Your Vue.js Toolbox Include?
  • How Do You Enhance Your Drupal UI Using Vue.js?
  • How Do You Build a Drupal-Backed SPA With Vue.js as Its Front-End?

And now... the answers you expect from me:
 

1. jQuery Is No Longer Enough: Face It, Adapt to It or... Be Left Behind!

Time to accept good ol' jQuery's limitations:

  • users expect and demand dynamic, fully interactive web experiences 
  • Drupal projects' front-end have gradually grown into some robust, complex “ecosystems” of js scripts; keeping them under steady control does call for a more powerful library

Decade-old jQuery can't cope with such front-end infrastructures, complexities and ever-growing user demands for richer web experiences.

And so, here's where you stand now: you need to pass on the front-end responsibilities of your Drupal 8 projects to... another library.
 

2. Why Specfically Vue.js?

Why not React or Angular? Or any other JavaScript framework riding the tide these days?

Well, here are some strong arguments tipping the balance towards a Drupal 8 and Vue.js “combo”:

  1. it's an easy to learn and “fresh” library that comes with little baggage (and none of the complexities that might discourage you from the very beginning)
  2. it comes with two-way data binding functionality and virtual DOM feature, like Angular and React
  3. it's ideally flexible
  4. it leverages the best practices of component-oriented development
  5. it comes equipped with modern tooling and lots of supporting libraries
  6. it's built a large, active community of front-end developers around it (so, there's always a helping hand to rely on, when in need)
  7. Laravel — a PHP framework — offers Vue.js support right out-of-the-box 

And I shall stop here with my reasons why I chose “young” Vue.js, over other JS frameworks, to power my Drupal projects' UI with. 
 

3. Getting Started: Integrate Vue.js into Your Drupal 8 Project!

So, how do you start using Vue.js? And, more importantly: how do you integrate it into Drupal?

You have 3 options at hand

  • take the easy way and just include <script> tag: <script src="https://unpkg.com/vue"></script> 
  • use the npm package
  • use the Vue.js Drupal module, which is geared at providing you with “a bridge between Drupal and Vue.js framework. “
     

4. Build Your Vue.js Toolkit 

It's true: Vue.js sure has a low learning curve, it comes with little baggage and doesn't get you tangled up in complexities of all sorts (like other JS frameworks do).

Getting a grip on using it is quick and easy.

And yet: it gets even quicker when you have the right tools at hand; useful plugins, “life-saving” components, supporting libraries...

Which brings us to the bare essentials that your Vue.js toolbox should include:

4.1 Webpack-simple template

It's this structure that you'll find inside the webpack-simple:

Drupal 8 and Vue.js- The Webpack-simple template

2 words of caution:

  1. make sure you don't use the tag body as a root element; the index.html file (having a simple HTML markup, with just one element with the “app” identifier in a body) will get replaced by a Vue.js-generated DOM. 
  2. the Vue components will get imported in the main.js file, located in the src directory (and which is the entry point of the webpack)

4.2 Vue-cli

Jumpstart your Vue.js and Drupal 8 project using the Vue-cli package!

An all-in-one starter kit including some of the official Vue project templates or one of the open-source ones. 

And here's how you use it:

  1. first, you install your vue-cli package: $ npm install -g vue-cli
  2. next, you get your project initialized, with the template of your choice: $ vue init webpack-simple vue-spa
  3. and finally, you navigate to your vue-spa folder and run npm in the terminal

Once you've installed all the needed packages, you can run your app in development mode and thus launch your Drupal 8 and Vue.js project on the webpack dev server.

4.3 Single file components

They sure make THE most powerful Vue.js feature! And they empower you, too, to build large-scale apps as infrastructures of multiple small and self-contained (reusable) components!

Each Vue.js component is made of three kinds of blocks:

  • <template>
  • <script>
  • <style>

And so, this enables you to break each one of your projects into loosely-coupled components.

Note: and where do you add that Vue.js's large and active community is constantly working on developing new and new components for you to use in your projects!
 

5. Vue.js and Drupal 8: Enhance Your Drupal Project's UI 

For this is why you've started reading this post after all, right?

To find out how you can add rich client site behavior to your future projects using a Drupal 8 and Vue.js "winning combo".

Here's the challenge you're facing:

Drupal's not equipped to help you build a modern, reactive (dynamic and interactive) user interface. As we've already agreed: jQuery's can't live up to modern web users' expectations.

And so, Vue.js steps in to “steal the show”: help you enhance your Drupal UI!

Here's a possible scenario where you can tap into Vue.js' functionalities: 

You want the “Create new account” button to show up only before the “Username” and “Email” fields have got filled in. 

Also, enhancing Drupal's user elements makes the perfect context to leverage some of the Vue.js components at hand.

Let's take a specific scenario for this:

User input data! Which has to be validated both on the front-end and on the back-end.

For this, first of all you'll need to add the following:

<script src=”https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.25/vee-validate.js”></script> 

Notice the “vee-validate”, in the code, which is nothing but a Vue.js plugin in charge with error display and input field validation.

Next, you make sure you change the input elements:

And voila! You've just harnessed Vue.js' power for upgrading some already existing Drupal user elements!
 

6. Feel Free to Add other Libraries to The “Gang”, As Well

Going even further with our Drupal UI-enhancing endeavors, let's say we want to integrate a third-party jQuery plugin with a custom Vue.js component.

As you'll see for yourself, Vue.js “plays well with others” (unlike React, for instance). It allows all the other js components integrated with your app to use virtual DOM.
 

7. Here's How You Build an SPA With Drupal 8 and Vue.js

Basically, you get everything you need for putting together your single page app in vue-router 2.
 

Tada! See how easy it is to integrate Vue.js into your Drupal projects? To inject precisely that rich client functionality that Drupal's good old jQuery can't?

And thus deliver interactive and dynamic web experiences to your users.

Time to put this advice and tips & tricks into practice now...