Seamless Integration of Vue.js in AEM Project: A Step-by-Step Guide for AEM Developers | Community
Skip to main content
Sady_Rifat
Community Advisor
Sady_RifatCommunity Advisor
Community Advisor
August 28, 2023

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

  • August 28, 2023
  • 3 replies
  • 4944 views

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:

Q&A

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    3 replies

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    September 1, 2023

    @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!!

    Kautuk Sahni
      R
      rahulsingha113
      January 4, 2024

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

        Sady_Rifat
        Community Advisor
        Sady_RifatCommunity AdvisorAuthor
        Community Advisor
        January 4, 2024

        @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.

          Terms & ConditionsAccessibility statement

          Loading footer...