Vue Routing with AEM

[sateeshk9319722]

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. 

[vanegi]

Hi @sateeshk9319722,

Please have a look at below discussions:

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/is-using-vue-js-with-aem-p...

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-can-i-implement-quot-s...

Thanks!!

[sateeshk9319722]

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]

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]

Hai Sundeep,

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

Thanks

[ChitraMadan · Accepted solution]

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

});

}