Is using Vue.js with AEM possible?

[carlinscuderi]

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.

[Peter_Puzanovs · Accepted solution]

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]

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]

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]

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.

[Blocker]

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!

[NiekRaaijmakers]

Holy cow!! This is great!! what a contribution!! Great work guys!!