Drupal & Vue.js: how to work without jQuery
Starting with the 5th version, Drupal has jQuery out of the box. It was an awesome tool for developers. But nowadays we face completely different problems that this library can not solve.
Why do I suggest you paying attention to Vue.js? I believe it is not another framework. First, it has a huge number of stars and downloads; a lot of front-end developers have a vivid interest in this project so you are not alone and these people can help you. Secondly, Vue.js has a large and friendly community. Another reason to get to know Vue.js is Laravel. Yes, you are right, this PHP framework supports Vue.js out of the box.
If these reasons don’t persuade you to learn and use Vue.js, please read this article. I will show:
- How you can enhance UI without jQuery;
- How to work with Vue.js components;
- How to integrate Vue.js with third-party libraries;
- How to create a simple SPA.
Getting Started
Let’s get started by describing the possibilities of how we can use this framework in our projects. The easiest way is including <script> tag.
Also, you can try out npm package or the Drupal module. The Decoupled module still has an issue where users ask to support Vue.js.
Enhance UI
Unfortunately, Drupal doesn’t allow us to develop a modern reactive user interface. It has jQuery in the core and this library can’t build it. I suggest trying Vue.js to enhance some Drupal user elements.
For example, we want to show the “Create new account” button only if “Email” and “Username” fields are not empty.
Vue.js components
Everyone knows that a typical developer doesn’t reinvent a wheel, but use ready-made solutions. The Vue.js community can offer a lot of awesome components. Let’s try to use one of them.
I believe that user input data should be validated as on the back-end as on the front-end side. So you have to add
“vee-validate is a lightweight plugin for Vue.js that allows you to validate input fields, and display errors.” ©
Also, please change input elements:
As you can see, using Vue.js and its components to enhance existing elements is very easy. And I have not faced with any reasons not to do it in your projects right now. However, I think you have a question how to use this framework with other libraries. OK, let’s continue.
Vue.js and other libraries
In this example, we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
Vue.js doesn’t behave as if it is alone on the site (yes, I’m talking about React ;) ). You will be able to use other js components and allow them to work with Virtual DOM.
Single Page Application
As usual, the most interesting subject will be discussed at the end. You can find all things to build SPA in vue-router 2. Just include this:
Final words
We have gone through all steps together: from the simplest example to SPA. I showed you that Vue.js is very simple and it is useful for any projects. I hope after reading this article you will have a curiosity to practice what you’ve just read. Please have a look at links below. They can also motivate you and help with some problems. Have a nice trip to this beautiful JS world!
Originally posted at the ADCI Solutions website.
