AEM with Vue.js - Making Front-End Developers Happy at Last
Ramiro Matteoda, September 10, 2018
Who doesn’t enjoy Happy Hour? Drinks are cheaper, snacks tastes better, and everyone is in a good mood because it’s the end of the day. But that kind of happy has been elusive for front-end developers working with Adobe Experience Manager (AEM)…until now.
Their struggle is over, and it’s soon to be Happy Hour for front-end developers when they start using Vue.js with Vuex with AEM. Vue.js components are ideal for creating web applications with complex client-side interactivity. Using Vuex gives us a state management pattern for storing content information.
Read on to learn more about Vue.js and Vuex, when to use them, and how they help.
What Is Vue.js?
Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue.js instance’s data. The templates code is similar to that of AEM HTL components and can be combined with it power AEM Components.
What Is Vuex?
While Vue.js is a framework, Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
Having multiple components that share a common state can be a problem because multiple views might depend on the same piece of state needed to mutate it. With Vuex, we extract the shared state out of the components and manage it in a global singleton. This way, our component tree becomes a big view, and we give our code more structure and maintainability.
When to Use Vue.js.
Although Vue.js and Vuex help us deal with client-site interactivity and shared state management, they come with a cost due to more concepts and boilerplate, so you only want to use them when necessary.
AEM Components with Vue.js and Vuex.
AEM combined with Vue.js and Vuex enables building highly interactive web pages with a professional authoring tool. To see how this works, let’s bring all three technologies together to create components that combine HTL and Vue.js, and share the state through multiples views using Vuex.
The AEM 6.4 project was created by using lazybones, and Webpack was integrated to improve the front-end development and deploy.
The next diagram shows how we integrate Vue.js and Vuex into the AEM System:
The front-end part of AEM contains the HTL Components and Vue.js Components (HTL with Vue.js). The center of every AEM/Vuex application is the store. A store is basically a container that holds your application state (AEM content and user inputs).
Vuex stores are reactive. When Vue.js components retrieve state from it, they will reactively and efficiently update if the store's state changes. You cannot directly mutate the store's state. The only way to change a store's state is by explicitly committing mutations. This ensures every state change leaves a track-able record.
Upon Page loaded, components render HTML code and use information from the store if needed. The Vuex actions make async REST call to AEM to get content from AEM and build the store. When the REST call inside actions ends successfully, it triggers a state change by committing mutations. The store state is reactive and updates the view layer in each component.
To support the state management pattern in AEM a Vue.js ClientLib was added to the project. This ClientLib contains the main Vue.js app that includes reference to all components and the store modules.
To better understand how the store works, notice that one of the modules in the store is dam.js. It contains a list of assets from AEM. This asset list is retrieved on Page loaded with a call to AEM Servlet that returns a JSON with all assets in a specific DAM folder configured by Authors. (For initial performance, include only path and name on each asset.)
With the asset list saved in the store, all asset paths and names are ready to be used in the view layer by Vue.js components. The asset list component that integrates AEM HTL component is configured by author and Vue.js component to build the view layer using data from the store.
Authors can configure the assets-path property that is passed to the Vue.js component assetlist.js that renders HTML code.
Next is the Vue.js Component code for assetlist that renders an HTML list with links to the assets in the DAM. All assets came from the Vuex store part of the app. This assets list is shared and could be used by other components.
It’s Time to Enjoy AEM Front-End with Vue.js!
As you have seen, it was quite simple to integrate Vue.js with Vuex into an existing AEM 6.4 project to create components with client-side interaction and better performance in the front end. Once the main Vue.js app is integrated using a ClientLib and the store is created, it’s easy for front-end developers to add new components, meaning they’ll enjoy their work more and might be done in time for Happy Hour. Drinks, anyone?
Ramiro is an AEM Senior Developer who loves to provide clients with tips for best practices in AEM, and he loves to swim. We believe he’s able to do these things concurrently, which demonstrates the level of talent we’ve got here at 3|SHARE.