Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Vue Routing with AEM

sateeshk9319722
Level 2
Level 2

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
ChitraMadan
Correct answer by
Community Advisor
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
sateeshk9319722
Level 2
Level 2

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
Level 5
Level 5

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
Level 2
Level 2

Hai Sundeep,

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

Thanks

ChitraMadan
Correct answer by
Community Advisor
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