Use frontendModule = vue | Community
Skip to main content
S
sachindey1231
New Participant
June 13, 2022
Solved

Use frontendModule = vue

  • June 13, 2022
  • 3 replies
  • 2614 views

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"

 

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 milind_bachani

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!


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/archetype/uifrontend.html?lang=en

 

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/archetype/using.html?lang=en

 

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.

 

3 replies

SantoshSai
SantoshSai
New Participant
June 13, 2022

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

Santosh Sai
    milind_bachani
    milind_bachani
    Employee
    June 13, 2022

    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

      S
      sachindey1231Author
      New Participant
      June 14, 2022

      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!

        Kiran_Vedantam
        Kiran_Vedantam
        New Participant
        June 13, 2022

        Hi @sachindey1231 

         

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

         

        Hope this helps!

         

        Thanks,

        Kiran Vedantam.

          S
          sachindey1231Author
          New Participant
          June 13, 2022

          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!

            Himanshu_Jain
            Himanshu_Jain
            New Participant
            June 13, 2022

            Try with archetypeVersion=27

            Himanshu Jain
              S
              sachindey1231Author
              New Participant
              June 13, 2022

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

               

                Terms & ConditionsAccessibility statement

                Loading footer...