Vue Routing with AEM | Community
Skip to main content
sateeshk9319722
sateeshk9319722
Level 2
Aug 13, 2020 12:29 PM UTC
Solved

Vue Routing with AEM

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.
ChitraMadan
ChitraMadanAccepted solution
New Participant
Aug 13, 2020 10:14 PM UTC

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();
});
}

 

 

View reply

5 replies

ChitraMadan
ChitraMadanAccepted solution
New Participant
Aug 13, 2020 10:14 PM UTC

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();
});
}

 

 

Translate
    SundeepKatepally
    SundeepKatepally
    New Participant
    Aug 13, 2020 2:44 PM UTC

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

    Translate
      sateeshk9319722
      sateeshk9319722Author
      Level 2
      Aug 13, 2020 3:48 PM UTC

      Hai Sundeep,

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

      Thanks

      Translate
      vanegi
      vanegi
      Employee
      Aug 13, 2020 12:46 PM UTC

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

      Translate
        sateeshk9319722
        sateeshk9319722Author
        Level 2
        Aug 13, 2020 1:07 PM UTC

        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.

        Translate
        Terms & ConditionsAccessibility statement

        Loading footer...