Building Interactive Experiences in Kentico with VueJS
Building interactive websites that are agile and provide users the exact data they need is critical to a great customer experience and journey. The easier it for a user to find the right information and content tailored to their specific needs, the shorter is the the customer journey and eventually builds a strong funnel for future growth. Exemplifi has been building interactive websites for some time now and across multiple Content management systems . In our latest insight, we share our story of building an interactive website using Vuejs in Kentico.
The Client’s Use Case
Our client EPIQ Global is an enterprise software company that provides legal products to clients globally. They wanted to launch a news section on their website that would have various news articles organized by industry.
When the user clicks on an industry on the right hand side, the list of articles would be automatically refreshed on the left to display only the relevant articles.
The Technical Background
The EPIQ website runs on Kentico and is hosted on Microsoft Azure. The News Template is designed as a two-column template built on Kentico’s portal engine and webparts. Each column has a corresponding webzone in which webparts can be added.
We added the following webparts on this template:
- FeaturedNews is a repeater webpart that is configured to display a news article marked as “featured”.
- “Partner” is a static HTML webpart that displays static text with a background image.
To learn more about webparts, you can checkout our article on How to Build Webparts and Widgets in Kentico
Why did we need a reactive JS framework like Vue?
An alternative is to use popular reactive frameworks such as VueJS and ReactJS. They are the latest in JS frameworks that are much more powerful than Vanilla JS described earlier. We selected VueJS to deliver this functionality.
VueJs operates utilizing the “Virtual DOM” concept. Vuejs updates the virtual DOM instead of the real DOM when the stage changes. and offers the ability to control the timing at which the Virtual DOM is rendered. This makes the HTML page rendering pretty quick and improves application performance.
Integrating Vue with Kentico
We integrated Vue with Kentico by simply including the vue.js file in the head section of the master template. A vue app file called epiq-vue.js is created inside the project directory and included in the head scripts as well.
<script type="module" src="~/epiq-discovery/epiq-vue/epiq-vue.js"></script>
We then initialize the vue app within the epiq-vue.js file as follows:
In news template layout a container is declared with id epiqvue to initialize the vue app and vue components <discovery-news> and <industry> are created and declared to render the news listing and category filters as shown in the code below:
The news listing section is componentized into separate two vue components
- Discovery news
These two components are declared in epiq-vue.js app file with necessary props and data as follows:
The fetchNews( ) method gets News data from the Kentico API using the fetch( ) method. It then structures the response data based on our needs. In the code below, we show how to consume the News JSON data with the fetch( ) method and assign the response data to the News Component property.
The actual news JSON data format is shown below:
Delivering the interactive experience with Vue
When the user clicks on the industry list on the right column, several things happen:
- The clicked category becomes active
- The News list (on the left) will be filtered based on the selected category.
- The pagination control also gets updated based on the latest results
This is how the screen looks before the user clicks on “Search by Industry”
After the user selects an Industry, it looks like this:
The news list is now filtered by industry and the pagination is updated as well.
The architecture that achieves this functionality is shown below:
- The computed property fetchNews is triggered when the user selects an Industry value
- The Vue Compute Method notices the changes and updates the Virtual DOM and calls the filterbyIndustry ( ) method.
- The filterByIndustry() updates the news list, as shown below
- The newy filtered results are then displayed by the vue template and the pagination is updated to reflect the latest results.
Epiq Global is the leader in providing technology enabled legal services across the spectrum of corporate restructuring, cyber security, busines transformation and more. As thought leaders in their field, we wanted to enhance their website’s news section, which provides users with latest cutting edge information about the industry.
In this project, we’ve built a customized News page with functionalities of filtering, mobile responsiveness, and quick loading times coupled with a user interface that provides a seamless experience for users to find the news content they are looking for - quickly and seamlessly. Combining the powerful capabilities of VueJS’s and Exemplifi’s expertise with Kentico, we were able to build this record time, and now you can too!
If you liked this insight and want more updates, we’d love for you to join us on Linkedin at Exemplifi, Facebook at ExemplifiSites or Twitter at ExemplifiSites.