Coral UI in AEM Vue

[ayush_agarwal]

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 solution]

Hello @ayush_agarwal ,

You can check this process: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-blogs/seamless-integration... 
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]

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-sta...

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