Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

How can I implement "static" vue.js application site

Avatar

Level 2

Hello,

I'm actually stuck trying to import and use a vue.js application in AEM.
I generated the static files and I want to import it in AEM so it will be usable/rendered and/or editable in my AEM instance, but actually I don't get how to make this happen, and there is absolutely no "tutorials" or documentation about this..

If someone can help ?

The final objective is to edit my Front end vue.js application thru AEM.

Thanks,

Hadrien

1 Accepted Solution

Avatar

Correct answer by
Administrator

Duplicate thread:- Is using Vue.js with AEM possible?

//

     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.

Thread 2:- Vue.js with aem

// Vue v1.0.26 is used in We Retail - AEM 6.3

/apps/weretail/clientlibs/vendor/vue/src/vue.js

Thread 3:- Vue JS with AEM



Kautuk Sahni

View solution in original post

5 Replies

Avatar

Correct answer by
Administrator

Duplicate thread:- Is using Vue.js with AEM possible?

//

     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.

Thread 2:- Vue.js with aem

// Vue v1.0.26 is used in We Retail - AEM 6.3

/apps/weretail/clientlibs/vendor/vue/src/vue.js

Thread 3:- Vue JS with AEM



Kautuk Sahni

Avatar

Level 2

Hello thanks for the answer

Actually I was hoping to get a tutorial or at least more informations on the process to implement a vue.js app/site in AEM.
Is using Vue.js with AEM possible? topic is OK, but I think it's not with this 10 lines answer that a rookie like me can manage to achieve a full implementation of a vue.js site in AEM, I would appreciate at least examples ..

So if anyone can help me ?

Thanks, best regards

Hadrien

Avatar

Level 10

WHy do you want to use vue.js? What are you trying to do that you cannot do with following AEM best practices like using AEM Super types. Core components, and HTL?

Avatar

Level 4

@hadrien303

I am not sure if VUEJS is JavaScript Libs and available as downloadable/includable files. As long as you have JS Files you can use it as Client Libs. Isnt that works?

Can you please elaborate more.

Avatar

Level 10

As Kautuk suggested - and confirmed by the Eng team:

We.Retail uses Vue.js + contexthub for its Cart implementation.

/apps/weretail/clientlibs/vendor/vue