Allow accessing to nuxt instance from window shortcut

[pi0]

Originally asked by @Atinux to bring back similar feature (window.$nuxt) from Nuxt 2

Security: Nuxt instance can be currently accessed in several ways from the global window in client-side, used by Vue Devtools and other extensions. Exposing it via a shortcut, does not imply any security concerns.

History: In Nuxt 2, it was being exposed as a single window.$nuxt both for debugging and also plugins that needed a nuxt instance outside of the plugin. It made some issues especially for when using more than once instance of Nuxt in one window (although never recommended). As a workaround we introduced a series of globalName options that allowed us to manually change it to something else and avoid conflicts. However it required heavily templating techniques that we no longer use for Nuxt 3. Also it was error prune for module authors to consider that this global name can be customized.

New API: For Nuxt 3, i propose we expose it as $useNuxtApp() with forward compatibility in mind if ever support back multiple instances per page, using $useNuxtApp(name?). Possibly using bundler plugins to automatically inject the (custom) name.

Current workarounds:

• Using Unctx in Window: __unctx__.get('nuxt-app').use()
• Using Vue in DOM: [...document.querySelectorAll('*')].find(el => el.__vue_app__?.$nuxt).__vue_app__.$nuxt

Remarks: Accessing nuxtApp from global instance is still in all ways considered an anti-pattern outside of lifecycle (vue rendering and plugins) as we cannot use useNuxtApp() even client-side which is intentionally. This API should be documented strictly for debugging purposes. And we might also offer an option to disable it.

[manniL]

Sounds like a good idea! Maybe even leave it disabled by default / only in dev?

Re Security: 💯 agree but I have the feeling that we will have another discussion like #15132 🙈 Or maybe not, as long as it is disabled or can be disabled.

[Atinux]

@manniL actually it's mostly useful for production debugging so far ahah, but we cannot do a lot of things anyway since we all work with composables now. So not even sure if this is that much important.

[pi0]

I'm thinking more that such a flag like (we had debug: true in Nuxt 2) would be nice to enable production builds with debugging enabled (global nuxt, not minified code, verbose logs, maybe composables, etc)

---

Regarding composables, in a "production debug mode", we might even expose auto-imported composables from the current page/components but of course, it makes sense. But indeed production debugging is tricky.

[danielroe]

Let's add as useNuxtApp 👍