Vue Routing with AEM | Community
Skip to main content
sateeshk9319722
sateeshk9319722
New Participant
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

ChitraMadan
ChitraMadanAccepted solution
New Participant
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();
});
}

 

 

    SundeepKatepally
    SundeepKatepally
    New Participant
    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
      New Participant
      August 13, 2020

      Hai Sundeep,

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

      Thanks

      vanegi
      vanegi
      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
        New Participant
        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.

        Terms & ConditionsAccessibility statement

        Loading footer...