Adobe Experience Manager Sites & More

Sady_Rifat · 8/28/23

Seamless Integration of Vue.js in AEM Project

by Sady_Rifat

Overview

In the rapidly evolving landscape of web development, technologies like AngularJS and jQuery have become outdated, urging the industry to transition towards more modern stacks. Enter VueJS, a cutting-edge framework that offers the best of both worlds. By seamlessly integrating VueJS into AEM projects, developers can harness the power of a modern, robust framework while continuing to benefit from the efficiency of HTL. This article serves as a comprehensive guide, demonstrating how VueJS can be integrated effectively by a non-SPA approach within AEM projects.

Read Full Blog

There are four parts in this series:

Part 1: Overview
Part 2: VUE 3 Setup
Part 3: Create a Component
Part 4: State Management

Q&A

Please use this thread to ask questions relating to this article and feel free to give any suggestions or corrections.

kautuk_sahni · 9/1/23

@Sady_Rifat Your willingness to share it is much appreciated. There have been numerous community inquiries on this very topic, making it a valuable resource. Thank you!!

rahulsingha113 · 1/4/24

Hey @Sady_Rifat Thanks for sharing this. I wanted to know will it work even when we are using multiple templates?

Sady_Rifat · 1/4/24

@rahulsingha113 ,

Thanks for your interest in this article. Yes, it will work, all you need to initialize the Vue app

id="app"

which is in the apps/aem-vue/components/page/page.html <body> tag.

So, NO direct dependency on the template except the page component or clientlibs.

However, you can also check this webpack-build-with-typescript branch for building with Webpack. Since I got some feedback people faced trouble with nc-febuild.

Adobe Experience Manager Sites & More

Seamless Integration of Vue.js in AEM Project: A Step-by-Step Guide for AEM Developers

Seamless Integration of Vue.js in AEM Project

Overview

Read Full Blog

There are four parts in this series:

Q&A

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe