Is using Vue.js with AEM possible?

Avatar

Avatar
Boost 5
Level 2
carlinscuderi
Level 2

Likes

5 likes

Total Posts

3 posts

Correct reply

0 solutions
Top badges earned
Boost 5
Validate 1
Boost 3
Boost 1
View profile

Avatar
Boost 5
Level 2
carlinscuderi
Level 2

Likes

5 likes

Total Posts

3 posts

Correct reply

0 solutions
Top badges earned
Boost 5
Validate 1
Boost 3
Boost 1
View profile
carlinscuderi
Level 2

27-01-2017

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 25
MVP
PuzanovsP
MVP

Likes

140 likes

Total Posts

543 posts

Correct reply

165 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 10
View profile

Avatar
Validate 25
MVP
PuzanovsP
MVP

Likes

140 likes

Total Posts

543 posts

Correct reply

165 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 10
View profile
PuzanovsP
MVP

27-01-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

Answers (4)

Answers (4)

Avatar

Avatar
Boost 5
Level 2
Blocker
Level 2

Likes

6 likes

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
View profile

Avatar
Boost 5
Level 2
Blocker
Level 2

Likes

6 likes

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
View profile
Blocker
Level 2

14-04-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!

Avatar

Avatar
Boost 5
Level 2
carlinscuderi
Level 2

Likes

5 likes

Total Posts

3 posts

Correct reply

0 solutions
Top badges earned
Boost 5
Validate 1
Boost 3
Boost 1
View profile

Avatar
Boost 5
Level 2
carlinscuderi
Level 2

Likes

5 likes

Total Posts

3 posts

Correct reply

0 solutions
Top badges earned
Boost 5
Validate 1
Boost 3
Boost 1
View profile
carlinscuderi
Level 2

30-01-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.

Avatar

Avatar
Validate 25
MVP
PuzanovsP
MVP

Likes

140 likes

Total Posts

543 posts

Correct reply

165 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 10
View profile

Avatar
Validate 25
MVP
PuzanovsP
MVP

Likes

140 likes

Total Posts

543 posts

Correct reply

165 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 10
View profile
PuzanovsP
MVP

30-01-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

Avatar

Avatar
Boost 5
Level 2
carlinscuderi
Level 2

Likes

5 likes

Total Posts

3 posts

Correct reply

0 solutions
Top badges earned
Boost 5
Validate 1
Boost 3
Boost 1
View profile

Avatar
Boost 5
Level 2
carlinscuderi
Level 2

Likes

5 likes

Total Posts

3 posts

Correct reply

0 solutions
Top badges earned
Boost 5
Validate 1
Boost 3
Boost 1
View profile
carlinscuderi
Level 2

30-01-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.