What is Drupal?
Drupal is a free, open-source web content management system (CMS) written in PHP. It's pretty old, but it still receives active development. Even though its popularity is decreasing it still has active community behind it.
Some of the good parts of Drupal are: Caching - Drupal caches a lot of things - making the load times low and websites - very fast, Open Source. I wish I could write more positive things..
Not so good parts - it has a steep learning curve, it's php:), development experience is probably the worst I've ever had. Random caching is a nightmare during development, it introduces a lot of issues, no easy way to print variables, heavy, generating config files while working in the team - nightmare, CMS translation - using google translate bugs out the CMS. Overall the CMS feels very much dated and maybe we should move to better, new and shiny things instead of using it, but I digress.. Also apparently Drupal's theming is so much better now compared to how it was in the past - I can't imagine of how bad of an experience it was before.
Quite recently I've landed a job at a company where Drupal is the main tool of choice when creating solutions for the customers. And since they're using it for so long - it's very established.
Initially I wasn't meant to dive into Drupal but some circumstances changed in the company right before I started working, so plans had to be changed and adjusted.
Now personally I come from a VueJS (and in general javascript) work environment, and due to unforeseen circumstances suddenly being thrown into php and Drupal was like cold water in the shower. Nonetheless I had to adapt and learn to live with the "new" technologies that are being used at my new job.
Why Vue.js?
I've decided to write this article because of a couple reasons. First, I've been looking into VueJS and Drupal for awhile now, and as it turns out there is not much information on the internet about these 2 going together. Secondly I wanted to see how well a javascript framework would work with Drupal, and if I could bring some familiarity(VueJS) into Drupal. And lastly I wanted to share my findings with others - who perhaps in the future will stumble upon this article looking information about VueJS and Drupal.
Some of the benefits for using VueJS in Drupal:
Great replacement for jQuery
Use it as much or as little as you want
VueJS's template syntax looks similar to twig - so it should feel familiar to Drupal developers
VueJS has plenty of community behind it, and there is a plethora of custom made components out there just waiting to be used
VueJS is supreme :)
Getting Started
Because of the scope of the article - lets assume that you already have a Drupal project setup ready to go. The very first thing you need to do in order to get started - is to add VueJS dependencies into our Drupal project. There are a couple ways of going about it. We can either install vue.js dependencies onto our project or we can pull the library through url.
Let's do the latter.
Inside your Drupal directory in the #THENAME.libraries.yml file - Let's create our reference to VueJS:
vue-js:
js:
https://cdn.jsdelivr.net/npm/vue/dist/vue.js: { type: external }
#THENAME.libraries.yml
With this we have the ability to assign vue-js as a dependency for any of our Drupal components. Doing so they will have access to all the Vue.js goodness. To show you how to use our newly added VueJS dependancy, let's create a new Drupal "component". Let's start by creating references in the #THENAME.libraries.yml file.
seasonal-wheel:
css:
theme:
dist/components/css/components/03-organisms/seasonal-wheel.css: {}
js:
dist/components/js/seasonal-wheel.js: {}
dependencies:
- THENAME/vue-js
#THENAME.libraries.yml file
"Seasonal-wheel" was the first feature I've made through Drupal and VueJS connection therefore this is the naming convention I will be using. However the key takeaways from here is that we give a name to our feature/component that we're referencing in #THENAME.libraries.yml file, and also point to the right directories to the .js and .css files. Lastly we attach our newly created vue-js dependancy that we've created earlier. Once this is done you should create the appropriate js and css files (the ones we are pointing) and voilà - we made VueJS working in the Drupal project. With this we can easily control and decide which our components should use vue-js dependancy. It's quite simple, right?
Another way to add VueJS onto our Drupal project - would be fully installing it. However as of right now - I still lack knowledge and competencies to talk about this method, and in actuality it might just be a topic of its own. Maybe in the future blog post, yeah? :)
And with this - VueJS is available in our Drupal project and it's ready to be used.
Drupal rendered markup and VueJS interactions
In the previous part I covered the #THENAME.libraries.yml file and how we added references to our files there. Let's also assume that you've created the files already (javascript and css) and everything is pointing to the right directories. The next step - would be to import our file references from the #THENAME.libraries.yml file. To do so we simply go to our newly created twig - in my case it would be block--inline-block--seasonal-wheel.html.twig
and in there we simply add at the very top of the file.
{{ attach_library('#THENAME#/seasonal-wheel') }}
#block--inline-block--seasonal-wheel.html.twig
And with this we're pointing to the library file and reference there we made which in turn holds references to the javascript and css files for the particular feature - in this case - seasonal-wheel. Now we're all connected and ready to code.
Next let's talk about #seasonal-wheel.js file - because its where our VueJS coding will be happening. Firstly we have to use document.addEventListener and wrap everything in it like so:
document.addEventListener('DOMContentLoaded', () => {
const vm = new Vue({
el: '.seasonal-wheel',
delimiters: ['${', '}'],
data: {
seasonalWheelData: {},
currentMonth: '',
randomMonthData: {},
showModal: false,
},
#Methods, lifecycle hooks etc..
});
});
#seasonal-wheel.js
I've left delimiters and a couple of data objects in there for your reference.
Speaking of delimiters - usually - by default VueJS is interpolated by using double curly brackets {{ }}. However thats how twig does its interpolation too, so it would be smart for us to create a different interpolation method - which is different from twig's. To do so - we simply create delimiters parameter and tell the system how we want our interpolation be. In my case - to interpolate(display) randomMonthData in the twig template file (block--inline-block--seasonal-wheel.html.twig) I would simply need to write it like so ${randomMonthData}.
Again we can set the delimiters to be whatever we want but I would recommend this practice.
And Voilà, we can write our Vue.js code normally now. The data is available from seasonal-wheel.js (vuejs) file and our block--inline-block--seasonal-wheel.html.twig file. Now we can easily pass data from twig to javascript and vice versa like we would be doing in VueJS.
Wrapping up
Regretfully there is still a lot that I don't know regarding VueJS and Drupal, but hopefully this article could serve as a starting point to people who are looking for a way to start using VueJS inside Drupal projects.
Hopefully this article was helpful and it leads to a bigger usage of VueJS in Drupal.
P.S Currently I'm looking into Drupal and possibility to use it as a Headless CMS with Nuxt front-end. If anyone has any thoughts and/or experience with it - I'd very much like to hear your thoughts on it.
Top comments (0)