Coral UI in AEM Vue

Question

Hi All,

We are working on Frontend Vue Module with AEM and building AEM consoles rendered with Vue. We are looking to use the Coral Library in the Vue App so that it could look like a AEM console and more over we could reuse the Coral library instead of developing custom components. Looking for pointers how to access Coral Library in Vue?

Sady_Rifat · Accepted Answer

Hello @ayush_agarwal ,You can check this process: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-blogs/seamless-integration-of-vue-js-in-aem-project-a-step-by-step/ba-p/615179 Github Project: https://github.com/SadyRifat/aem-vue/tree/webpack-build-with-typescript In this process, you can create a component by mixing HTL/Slightly and Vue transpiling.Create components by extending the core components. Where you need to change you can either generate markup from HTL or Vue.

EstebanBustamante · Answer

As far as I know, the Coral JS and styles are available in author mode by default because they are included as part of the default categories when a page loads in author mode. Therefore, you don't really need to worry about 'importing' the library. You can write your HTML using the Coral UI elements and ensure that they run in author mode.

Here is the library reference: https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/getting-started.html

Additionally, here is a valuable resource that can help: https://medium.com/@vsr061/develop-front-end-components-with-aem-coral-ui-2da905096cce"

Sign up

Login with SSO

Login to the community

Login with SSO