Use frontendModule = vue

[sachindey1231]

I am getting the below error when i am trying to use frontendModule=Vue

Referring this article: https://www.mavice.com/blog/vue-spa-editor-project/

mvn -B archetype:generate -D archetypeGroupId=com.adobe.aem -D archetypeArtifactId=aem-project-archetype -D archetypeVersion=26 -D appTitle="My Test Project" -D appId="my-test-project" -D groupId="com.my.test" -D frontendModule=vue -D includeExamples=n -D aemVersion=6.5.9 -D includeErrorHandler=y -D archetypeRepository=http://repo.adobe.com/nexus/content/groups/public/ -D includeDispatcherConfig=n

Error:

Exception in thread "main" Assertion failed:

assert new File(rootDir, "ui.frontend.$optionFrontendModule").renameTo(new File(rootDir, "ui.frontend"))
| | | | | |
| | vue false | C:\Users\002RGP744\Desktop\Work\Adobe Projects\VUE SPA\vue-fpl-project
| | C:\Users\002RGP744\Desktop\Work\Adobe Projects\VUE SPA\vue-fpl-project\ui.frontend
| C:\Users\002RGP744\Desktop\Work\Adobe Projects\VUE SPA\vue-fpl-project
C:\Users\002RGP744\Desktop\Work\Adobe Projects\VUE SPA\vue-fpl-project\ui.frontend.vue"

[Himanshu_Jain]

Try with archetypeVersion=27

[sachindey1231]

Thanks for your reply, already tried the 27 version but does not work either!

[Kiran_Vedantam]

Hi @sachindey1231 

please find the related query: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/vue-js-spa-with-aem/m-p/38...

Hope this helps!

Thanks,

Kiran Vedantam.

[sachindey1231]

Thanks @Kiran_Vedantam Already been through the link you shared, however i have more specific queries around how to create a frontendModule=vue based project. The articles talks more about modelling it on angular/react which i do not want to do as it will require lot of changes on the ui.frontend layer + webpack changes!

[SantoshSai]

Hi @sachindey1231 
Kindly refer this https://www.emakina.com/en-rs/news/blog/post/aem-with-vue-js-part-1 article for setting up Vue.js project.

You can consider below aspects while dealing with it,

1. https://github.com/rmatteoda/AEM_VueJS here is the project you can clone which is completely on Vue.Js
2. Setup new latest archetype and follow the instructions stated in above article.

More reference: https://blog.3sharecorp.com/adobe-experience-manager-front-end-development-using-vuex

https://www.mavice.com/blog/create-a-custom-aem-vue-component/

Hope that helps you!

Regards,

Santosh

[milind_bachani]

Hi @SantoshSai ,

The article you shared is not Vue with SPA , its normal vue integration by creating a webpack and putting it into clientlibs.

Also, this is very old structure to work upon : https://github.com/rmatteoda/AEM_VueJS

@sachindey1231 - I tried creating the vuw frontend with archetype 26,27,28 I am facing following error :

Failed to execute goal org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate (default-cli) on project standalone-pom: startup failed:
[ERROR] General error during conversion: Conflicting module versions. Module [groovy-all is loaded in version 2.4.16 and you are trying to load version 2.4.8

And for archetype 36, I am facing the mentioned error :

assert new File(rootDir, "ui.frontend.$optionFrontendModule").renameTo(new File(rootDir, "ui.frontend"))

Best workaround I think of right now is to use Mavice team's vue repo and fork the same.

Thanks,

Milind

[sachindey1231]

To fix the 1st error you need to update the groovy version to 2.4.8 in your .m2. 

2nd error is the one i am also getting as there is no ui.frontend.vue in the aem-project-archetype!

[milind_bachani · Accepted solution]

Hi @sachindey1231 ,

We officially dont have support of VUE with spa editors.

Currently, most of the projects using Vue with AEM have the classic way of using it, which can be seen here : https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/archetyp...

Here is a documentation on archetype values for frontend values. And "vue" is an invalid keyword.
Only allowed values are : "general", "none", "react", "angular" as of now.

Check here : https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/archetyp...

You can create non SPA project by using "general", putting your vue code in ui.frontend and establishing the whole frontend foundation which is automatically bundled using webpack and replace in clientlibs using npm run watch-dev.

Hope this helps, thanks.