Is using Vue.js with AEM possible? | Community
Skip to main content
carlinscuderi
carlinscuderi
Level 2
January 27, 2017
Solved

Is using Vue.js with AEM possible?

  • January 27, 2017
  • 5 replies
  • 9061 views

Hi there, I'm a front end developer. Our company is going to be adopting AEM going forward and I don't know a ton about it, though we've used it a bit in recent projects.

I'm wondering if there's a way to use a front end JavaScript framework with AEM? We strongly prefer Vue.js, but also have experience with Angular & React.

If there is a way, how would we go about implementing a path to this objective? 

Thanks in advance for any responses.

    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 Peter_Puzanovs

    Hi Carlin,

    Yes, AEM would work with VueJS as FE Framework..

    Just to provide you an overview:

    Current version of AEM supports back end based page generation. So, you would not have normal SPA(the generation of each page would be done by AEM) using Sling Framework and a bit of Granite/Day code. You logically would not need router or vue-cli. You would instead use your prefered js builder to create one js with all your VueJS logic and upload it into AEM Clientlib, this way your code would become available in AEM.

    Your .vue components could be first started with Sling/Sightly markup and then enhanced with VueJS  and their data presented/given to VueJS over via JSON(AEM is great at JSON and REST) calls from AEM. This way your content authors would get AEM based dialogs for data input into database and you would still have possibility to enhance view of your system with Vue.

    Have not seen any issues with AEM 6.1 SP1 and VueJS V2.0(or may be was just lucky).

    Hope it makes sense.

    Regards,

    Peter

    5 replies

    Peter_Puzanovs
    Community Advisor
    Peter_PuzanovsCommunity AdvisorAccepted solution
    Community Advisor
    January 27, 2017

    Hi Carlin,

    Yes, AEM would work with VueJS as FE Framework..

    Just to provide you an overview:

    Current version of AEM supports back end based page generation. So, you would not have normal SPA(the generation of each page would be done by AEM) using Sling Framework and a bit of Granite/Day code. You logically would not need router or vue-cli. You would instead use your prefered js builder to create one js with all your VueJS logic and upload it into AEM Clientlib, this way your code would become available in AEM.

    Your .vue components could be first started with Sling/Sightly markup and then enhanced with VueJS  and their data presented/given to VueJS over via JSON(AEM is great at JSON and REST) calls from AEM. This way your content authors would get AEM based dialogs for data input into database and you would still have possibility to enhance view of your system with Vue.

    Have not seen any issues with AEM 6.1 SP1 and VueJS V2.0(or may be was just lucky).

    Hope it makes sense.

    Regards,

    Peter

      carlinscuderi
      carlinscuderiAuthor
      Level 2
      January 30, 2017

      Thanks for the reply!

      Right now we're using Webpack to build our JS. So we'd build one file from all our Vue code and upload it to AEM Clientlib?

      With the .vue components, do you have any examples of what one would look like (medium complexity)?

      Thanks again for the info.

        Peter_Puzanovs
        Community Advisor
        Peter_PuzanovsCommunity Advisor
        Community Advisor
        January 30, 2017

        So we'd build one file from all our Vue code and upload it to AEM Clientlib?

        Yes, create a clientlib, that will reference 'bundle.js' in it's js.txt content. Use your standard process to build your 'bundle'.js file. Then as a next step after file has been compiled upload it to your localhost or simply copy it into corresponding folder in file system with webpack and then use maven to deploy to server(it's up to you). For more info on clientlibs read[1]

        With the .vue components, do you have any examples of what one would look like (medium complexity)?

        Not allowed, sorry.

        [1] blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/

        Regards,

        Peter

          carlinscuderi
          carlinscuderiAuthor
          Level 2
          January 30, 2017

          Ok, thanks again.

          With the .vue components, do you have any examples of what one would look like (medium complexity)?

          Not allowed, sorry.

          As an aside, it's silly you're not allowed to post code examples here, or link to one externally. Makes working with this software that much more difficult and painful.

          EDIT: I just realized that you probably meant your job prevents you from posting code examples, not the Adobe Forums. In that case, is there anyway you could share a snippet with anything sensitive removed? Either way, thanks.

            B
            Blocker
            Level 2
            April 14, 2021

            Hello!

            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.

            Thanks and we hope this helps!

              S
              Adobe Employee
              Sc0rpic0mAdobe Employee
              Adobe Employee
              May 13, 2021
              Holy cow!! This is great!! what a contribution!! Great work guys!!
                Terms & ConditionsAccessibility statement

                Loading footer...