Expand my Community achievements bar.

SOLVED

Vue Routing with AEM

Avatar

Level 3

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. 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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 solution in original post

5 Replies

Avatar

Level 3

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.

Avatar

Community Advisor

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

Hai Sundeep,

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

Thanks

Avatar

Correct answer by
Community Advisor

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