The majority of websites are getting rendered on the server-side. For most usecases this is just fine and may still even have some benefits regarding searchengine visibility and accessibility. Choosing Vue.js as client-side JavaScript library instead of the old workinghorse jQuery can greatly enhance our development workflow for CMS driven Websites and Onlineshops. Frontend developers can focus on actual ui- and business logic instead of worrying about DOM-selectors and initialization tasks.

Sophisticated enterprise grade Content Management Systems are designed to provide editors with powerful, flexible features to arrange their content. This usually includes adding or embedding content blocks or widgets in an arbitrary manner in order to create rich and unique editorial articles.

Typically most of these widgets require JavaScript to work properly in the web frontend. Think of an accordion widget, a geographic map or an image gallery. Without JavaScript they may lack a lot of functionalities. So for most embedded widgets, a JavaScript Component has to be initialized when the page loads.

In the old jQuery world, developers most likely create a plugin for each widget-type. This is fine, but leaves us with the challange of not knowing which widget was actually added to a page by an editor and thus not knowing which jQuery plugin needs to be setup and initialized. In most cases we end up by introducing some kind of pageType or providing some sort of embedded-widgets configuration Object as inline JavaScript variable or such. However, there are downsides to this approach:

1. The CMS, or the backend system in more general terms, need to be aware of available JavaScript Widgets or Pagetypes as information on their usage somehow needs to be rendered into each page.
2. The frontend developers have to handle initializing the appropriate plugins according to the provided information about used widgets.
3. The JavaScript is tightly coupled to the CMS template as any changes in the rendered HTML markup may break things, because jQuery relies heavily on DOM.

This is where Vue.js steps in.

1) Decouple JavaScript from backend and DOM

Using Vue for websites, backend developers don`t have to be aware of JavaScript initialization at all. They just add custom element-tags to their templates instead of generic div, giving the server-side rendered HTML pages even more structure and meaning.
Additionally, attributes can be defined for any custom element by the frontend developer, exposing a semantical API. Any kind of parameters can be passed through those attributes to the Vue component. Done right and documented well, this can enhance the overall development workflow by assuming this API as a kind of contract between backend and frontend devs.

2) Don`t worry about initialization

One of the great advantages by using Vue.js is that the power of custom elements is included. So instead selecting a DOM element by id or class and then enhancing it with JavaScript, like with jQuery, one can just place a custom element-tag in the HTML markup. As soon as the document is ready in the browser, Vue automatically attaches accompanying JavaScript components to the custom elements. The only thing a developer has to do is registering some code for the custom element, a so called component. But this is basically just the same as with a jQuery plugin.

Register my-component component

Vue.component('my-component', {});  

Then we can just add our component everywhere on our page and it will be intialized.
So a CMS widgets view template only needs a custom element <my-component> and it will just work, provided a View instance is bound to the documents body or main element. This is as easy as:

new Vue({
  el: 'body'
});

3) Concentrate on business logic instead of DOM selectors

When developing complex UI for websites and shops, like configurators, sophisticated forms and alike, much effort had to be spent on selecting DOM elements, adding or removing classes, attaching and removing event listeners and manipulating the DOM. This usually lead to tightly coupled JavaScript and HTML, besides distracting developers from implementing meaningful application logic.
With Vue instead, eventhandlers can be declared as attributes, the DOM gets automatically rendered whenever the bound data changes, classes are set according to the models state and DOM elements normally do not have to be selected manually. Therefore Developers can focus more on the applications actual business logic and much less, more readable custom code is required usually to fulfill requirements.

4) Combine server-side with powerful client-side rendering

Vue comes with very capable client-side rendering and a full set of templating features.
Templates can be baked into Vue-components, loaded dynamically or inlined in the HTML document.
Especially the latter can be useful in combination with server-side rendering for websites and onlineshops.
The important thing here is the inline-template attribute on our element. This tells Vue to take the innerHtml of the component`s element as its template.

Lets assume this view template for a Pimcore area brick, which is a widget in Pimcore CMS. Here we see a combination of server-side and client-side rendering.

<my-component inline-template>
  <h3><?= $this->input('title'); ?></h3>
  <input v-model="message" placeholder="<?= $this->('message_placeholder'); ?>" />
  <p v-if="message"><?= $this->t('your_message'); ?> {{ message }}</p>
</my-component>  

An CMS editor can input a title. The message_placeholder and your_message are taken from i18n translation strings from Pimcore. When rendered on the server-side, the resulting HTML will be:

<my-component inline-template>
  <h3>The title of this widget</h3>
  <input v-model="message" placeholder="put the message here" />
  <p v-if="message">your message {{ message }}</p>
</my-component>  

Then, if a user puts in some message in the <input> element, the <p> element will be shown, displaying the users message.

5) start developing modern and cleaner JavaScript applications

Vue components are basically plain JavaScript Objects, without any unusual syntax or global variables like $ and are working great with modern JS syntax and features like promises. As developers can focus on logic instead of clumsy DOM operations and event handling, much less and cleaner JavaScript is required to get the job done. This not only results in faster applications load and startup time, but will also simplify maintaining the application in the future, as the code is better readable and more structured than with the usual jQuery approach.

Hopefully this will give you a better understanding how Vue can enhance your overall development workflow when creating a corporate CMS website or onlineshop and helps you unleash the power of modern JavaScript. Even your content editors will gain more freedom as you can create them widgets for their CMS which they can use everywhere on their content sites.

Thanks for reading and feel free to get in touch or place your thoughts in the comments section below.