Thu, 01/24/2019 – 19:25
“That’s a beautiful view!”, you exclaim when you witness the sunset while standing on a beach with waves touching your feet. That is when you come out of the rut, leave behind the humdrum life of city and ‘really’ feel a natural beauty. There is another view in the digital landscape that will make you exclaim, “wow!”, and that is Vue.
Vue.js is fantastic for developers to build applications faster and make it more attractive and user-friendly. In combination with Drupal, one of the leading open source content management systems, Vue JS can be a brilliant option for web development needs.
Browsers that we see today are did not have the sort of functionalities until the early 2000s. They were much less powerful and, performance-wise, there was no feasibility in creating intricate applications inside them.
The rise of VueJS
The usage of VueJS has seen a tremendous rise over the years as represented in the graph below.
VueJS scores heavily when it comes to high traffic websites. Organisations in need of a web development solution that can scale well during a high spike in traffic are opting for VueJS as can be seen in the graphical representation below.
Meritorious features of VueJS
Following are some of the benefits of VueJS:
Smaller in Size
Moreover, it has a simple structure which is great for both small and large scale template development and saves a lot of time as a result. You can even trace the blocks with errors due to its simple structure.
It facilitates developers while integrating with existing applications which makes it a great prospect for developing new web applications and changing the pre-existing applications. The integration is possible because it has components for everything.
The documentation of VueJS is very detailed, simple to understand and constitutes several code examples. It has a growing community of developers that can assist when needed.
Its MVVM architecture (Model-view-viewmodel) helps in facilitating two-way communications for easy management of HTML blocks.
Implementing VueJS with Drupal
Like VueJS, Drupal is very scalable and has been powering high-traffic websites around the world. It also has been outperforming other leading content management frameworks in this criteria.
The blend of Drupal and VueJS, which are both preferred for their scalability, can be a remarkable option.
One of the ways of utilising VueJS with Drupal is the development of single page application as we have discussed in an earlier blog. It involves the installation of Drupal 8 on the local system followed by the creation of custom content types, adding views, and enabling REST API.
Then, you can start building front end with VueJS and create single page application. This would involve setting up of Vue project with Vue CLI. Once this is done, the addition of Vue router and Vue resource is performed. Vue router, the official router for VueJS, deeply integrates with VueJS core is similar to the angular router (of Angular JS) and react router (of React JS). Vue resource is the plugin for VueJS that offers services for making web requests and govern responses. Then, you can start modifying main.js file to use Vue routers and Vue resources and modify the app.js to work with the router followed by setting up of app components and routers.
Arbetsförmedlingen, Swedish Public Employment Service, benefitted from the amalgamation of Drupal and VueJS. Drupal Europe 2018 had a session that talked about how a video platform that was built for the Swedish government.
The platform used podcasts, video on demand and live broadcast for the dissemination of their content. They needed a new platform where these different sorts of media could be imported and metadata could be added for easily grouping them and filtering them out.
RESTful Web Services and Serialisation modules were enabled that gave the ability to create normal views as REST export and Axios, a promise-based HTTP client that has an easy-to-use API and can be leveraged in both the browser and NodeJS, was used for the consumption of data. Theme structure comprised of the twig, JS and CSS. Pluggable VueJs components were utilised and event handling configuration was shown through ‘Load More’ button.
The amalgam of Drupal and VueJS can be a rewarding solution that can help fulfil your digital transformation dreams.
We are devoted to providing ambitious digital experience to our partners through a suite of services.
Ping us at firstname.lastname@example.org to get the best out of Drupal and VueJS amalgamation.