[bug] Model-Manager throws errors when using Nuxt.js (with vue-router)

[anoack93]

Describe the bug
Currently, we at diva-e working on a support of the Nuxt.js framework for AEM based on the Vue implementation provided by Mavice.
So we replaced the regular react application in the Weekend-SPA-Example with a similar nuxt setup. The difference here is, that nuxt bootstraps the Vue application internally so we cannot intervent much in this lifecycle.

When importing the aem-spa-page-model-manager package in our nuxt application we get the following error in the browser console:

aem-spa-page-model-manager.js?64bf:1 Uncaught (in promise) Error: ModelClient is undefined. Call initialize first!

This happens as soon as we import anything from your package, even when we are just importing Constants and do nothing else with the modules.

At first this error caused our website to remain blank and no rendering was executed. But by adding some error handling, we were able to avoid this problem and the site was displayed correctly.
In our view this error is strongly related with Issue #60, our current workaround is to disable model routing completly:

meta: [
  { property: 'cq:pagemodel_router', content: 'disabled' }
]

I think in the AEM SPA preview, this property is already set, so this issue only applies for the live page.

Technical Details

The react and vue wknd samples work like this:

1. Package-Import
2. Execution of ModelManager.initialize()
3. Vue/React-Router init

In Nuxt this sequence is a bit different

1. Package-Import
2. Vue/React-Router init
3. Execution of ModelManager.initialize()

Package version

• @adobe/[email protected]
• using aem-sdk-quickstart-2021.4.5139.20210407T003220Z-210325

To Reproduce

It should be possible to reproduce this error by using either the react-wknd-spa or vue-wknd-spa (mavice) sample project and create the respective router of the framework before executing ModelManager.initialize

When calling initialize before creating the vue-router, this problem is not present.

Expected behavior

Package import and ModelManager-Init should be independet of the vue router init time. This seems to be a problem caused by #60

Screenshots

[pfauchere]

Hi, @anoack93 great to see Mavice implement support for Vue.js. You rock! I am wondering if using ModelManager.initializeAsync() [0] could help until #60 is resolved? Anyway, the latter function may become the way to go when initializing the library.

[0] https://github.com/adobe/aem-spa-page-model-manager/blob/master/src/ModelManager.ts#L190

cc @sharanyavinod

[anoack93]

I think it does not make a difference to use ModelManager.initializeAsync() because initalize is also based on this function.
Currently we are just disabling the pagemodel-router I think that is okay for now.