Coral UI in AEM Vue | Community
Skip to main content
A
ayush_agarwal
September 20, 2023
Solved

Coral UI in AEM Vue

  • September 20, 2023
  • 2 replies
  • 658 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Sady_Rifat

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.

 

2 replies

Sady_Rifat
Community Advisor
Sady_RifatCommunity AdvisorAccepted solution
Community Advisor
September 20, 2023

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
    Community Advisor and Adobe Champion
    EstebanBustamanteCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    September 20, 2023

    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"

    Esteban Bustamante
      Terms & ConditionsAccessibility statement

      Loading footer...