Integrate Vue 3 with AEM

[Sady_Rifat]

Hello members,
We are trying/planning to integrate Vue 3 in AEM.

Our work procedure will be like this ->

• In ui.frontend we will create vue component
• After building it the codes will be put in ui.apps any clientlib [which is possible via aem-clientlib-generator]
• In the ui.apps component write HTML code with vue and Slightly language.  For example-

  • <div class="cmp-helloworld" data-cmp-is="helloworld">
        <h2 class="cmp-helloworld__title">Hello World Component</h2>
        <div class="cmp-helloworld__item" data-sly-test="${properties.text}">
            <hello-world msg="${properties.text}"></hello-world>
        </div>
    </div>

Problems:

• Since Vue 3 is running from main.js under a vue project, it needs to mount with App component by an ID. We put an ID in the body tag and load the AEM page.
  Output: Initially page is loaded with HTL code, just after that all the content is replaced with the vue App component. which actually makes sense since it initiates its component.

So, how actually we can meet our requirements?

Note:

• We don't want to use Vue CDN. Our 1st preference is to use CLI
• Is there any way to scan all the components and build the corresponding codes?

[Nishant-Singh]

Hi @Sady_Rifat 

The Mavice team has added a new Vue.js SPA integration to AEM. Take full advantage of Vue's progressive and reactive ecosystem in creating scalable and production-ready AEM SPA applications. We were able to achieve this by developing an 'aem-vue-editable-components' library, similar to the 'aem-react-editable-components'. See the Mavice AEM WKND Vue project or create your own by cloning Mavice's fork of the Adobe AEM archetype on Github.

[Sady_Rifat]

Hello @Nishant-Singh,

Thanks for your reply. But maybe I was unable to clear the requirement. I have seen this project. Though it's built with Vue 2 I am trying to do similar migration with Vue 3. To do this I faced some troubles. It's better if I got anything from Vue 3.
However, I also want to leverage the power of HTL also. In summary, I just want to replace AngularJS or jQuery with Vue. Is it possible by any workaround?

[Nishant-Singh]

Hi @Sady_Rifat 

Please check this  -

https://github.com/GuillaumeCleme/aem-vue-corecomponents

[Sady_Rifat]

Let me check this

[Sady_Rifat]

Hello @Nishant-Singh ,

Completed the investigation, In the end just found that this project is using CDN Vue. Which was not my requirement. My question was related to the use of Vue CLI.