Integrate Vue 3 with AEM
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?
