Vue Routing with AEM | Community
Skip to main content
sateeshk9319722
sateeshk9319722
Level 2
August 13, 2020
Solved

Vue Routing with AEM

  • August 13, 2020
  • 3 replies
  • 2664 views

Hello all,

How to use routing of vue js in AEM.

Use Case: We have a component called "Login" , I want to load one more component if the user logged in successfully

FYI: The Vue components are integrated with AEM and we are loading the AEM components on the page.

 

Many thanks. 

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

Hi @sateeshk9319722,

 

May be you can try to trigger event from 1 view to another.

 

So, when a user logs in, you can fire the event which the other view/component will be listening to.

You can refer to this article https://www.danvega.dev/blog/2019/06/05/triggering-events-router-vue/

 

We did something similar to this using broadcasts in angular js. May be you can try on the same lines.

function postUserLoggedIn(options) {
$rootScope.$broadcast('userLoggedIn');
$window.parent.postMessage({
action: 'userLoggedIn',
profile: options.profile,
idToken: options.idToken || undefined
}, '*');
 
$scope.$on('userLoggedIn', function () {
$scope.isLoggedIn = true;
fillUserDetails();
});
}

 

 

3 replies

vanegi
Adobe Employee
vanegiAdobe Employee
Adobe Employee
August 13, 2020

Hi @sateeshk9319722,

Please have a look at below discussions:

 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/is-using-vue-js-with-aem-possible/qaq-p/168307/comment-id/2854

 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-can-i-implement-quot-static-quot-vue-js-application-site/qaq-p/254371

 

Thanks!!

    sateeshk9319722
    sateeshk9319722Author
    Level 2
    August 13, 2020

    Hai vanegi,

    Thanks for the reply..

    The exact issue here is how can we switch(using routers) between the  vue  components from AEM components based on the condition.

    Thanks.

    SundeepKatepally
    Community Advisor
    SundeepKatepallyCommunity Advisor
    Community Advisor
    August 13, 2020

    Does contexthub solves your use case  ? based on a defined segment (in your case user logged in) you will show the component else not.

      sateeshk9319722
      sateeshk9319722Author
      Level 2
      August 13, 2020

      Hai Sundeep,

      I couldn't find anything in contexthub related to this.

      Thanks

      ChitraMadan
      Community Advisor
      ChitraMadanCommunity AdvisorAccepted solution
      Community Advisor
      August 13, 2020

      Hi @sateeshk9319722,

       

      May be you can try to trigger event from 1 view to another.

       

      So, when a user logs in, you can fire the event which the other view/component will be listening to.

      You can refer to this article https://www.danvega.dev/blog/2019/06/05/triggering-events-router-vue/

       

      We did something similar to this using broadcasts in angular js. May be you can try on the same lines.

      function postUserLoggedIn(options) {
      $rootScope.$broadcast('userLoggedIn');
      $window.parent.postMessage({
      action: 'userLoggedIn',
      profile: options.profile,
      idToken: options.idToken || undefined
      }, '*');
       
      $scope.$on('userLoggedIn', function () {
      $scope.isLoggedIn = true;
      fillUserDetails();
      });
      }

       

       

        Terms & ConditionsAccessibility statement

        Loading footer...