fix(vue-app): fallback to global nuxt instance of $root is not available

[vcordes79]

Types of changes

return window.$nuxt if $root is not set

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

$nuxt was not always accessible (if $root was not set), so return the property from window object

fixes #8995

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[vcordes79]

fixes #8995

[danielroe]

I'm worried this will lead to inconsistent behaviour between client/server rendering.

[pi0]

Indeed we have to double-check this. Check-related issue #8995 is due to usage of the second app by vuetify.

[vcordes79]

I don't see any inconsistant behaviour between client/server.

In the server it will be this.$root.$options.<%= globals.nuxt %> if it's defined. If it's not defined, it will still be undefined, because window is not defined server side. I see there can be an error when accessing a property on undefined - the changed code would fix this.

On the client it won't change anything if $root exists - only if it does not. Could you please explain, what the problem is?

[clarkdo]

It looks OK, but as @pi0 mentioned, let double check, a test for this would be test.

BTW, I think we can split this complex expression into if/else, sth like:

const globalNuxt = this.$root.$options.<%= globals.nuxt %>

if(process.client && !globalNuxt && window) {
  return window.<%= globals.nuxt %>
}

return globalNuxt

[PayelKarmakar06]

I recently tried upgrading to 2.15.4, but I am still facing $root not available issue.
Why don't we add a null check against $root?
The control is not going beyond - const globalNuxt = this.$root.$options.$nuxt , as this.$root is not available. Hence the next if block -
if (process.client && !globalNuxt && typeof window !== 'undefined') {
return window.$nuxt
}
is of no use to me.

What would rather work is -
const globalNuxt = this.$root ? this.$root.$options.$nuxt : null // null check added
if (process.client && !globalNuxt && typeof window !== 'undefined') {
return window.$nuxt
}