Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Use frontendModule = vue

Avatar

Level 3

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"

 

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

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.


Screenshot 2022-06-14 at 1.24.23 PM.png

 

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.

 

View solution in original post

8 Replies

Avatar

Community Advisor

Try with archetypeVersion=27

Himanshu Jain

Avatar

Level 3

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

 

Avatar

Level 3

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!

Avatar

Community Advisor

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

Avatar

Employee Advisor

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

Avatar

Level 3

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!

Avatar

Correct answer by
Employee Advisor

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.


Screenshot 2022-06-14 at 1.24.23 PM.png

 

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.