Nuxt•2mo ago

Access nitro/nuxt hooks from nuxt module

I cannot use await (because it means breaking changes).

function getHooks(): Hookable<GlobalFetchHooks & ClientFetchHooks> | null {
  try {
    // @ts-ignore
    const nuxtApp = useNuxtApp()
    if (nuxtApp) {
      return nuxtApp.hooks as Hookable<GlobalFetchHooks | ClientFetchHooks>
    }
  }
  catch (err) {
    console.error('abc', err)
  }

  try {
    // @ts-ignore
    const nitroApp = useNitroApp()
    return nitroApp.hooks as Hookable<GlobalFetchHooks | ClientFetchHooks>
  }
  catch (err) {
    console.error('abc', err)
  }

  return null
}

function getHooks(): Hookable<GlobalFetchHooks & ClientFetchHooks> | null {
  try {
    // @ts-ignore
    const nuxtApp = useNuxtApp()
    if (nuxtApp) {
      return nuxtApp.hooks as Hookable<GlobalFetchHooks | ClientFetchHooks>
    }
  }
  catch (err) {
    console.error('abc', err)
  }

  try {
    // @ts-ignore
    const nitroApp = useNitroApp()
    return nitroApp.hooks as Hookable<GlobalFetchHooks | ClientFetchHooks>
  }
  catch (err) {
    console.error('abc', err)
  }

  return null
}

I have code like this but it kinda does not work without imports, if I add

import { useNitroApp, useNuxtApp } from '#app'

import { useNitroApp, useNuxtApp } from '#app'

i get

[nitro 5:15:34 PM]  ERROR  RollupError: [plugin impound] Vue app aliases are not allowed in server runtime. [importing #app from ../../Development/SideProjects/nuxt-open-fetch/dist/runtime/fetch.js]

[nitro 5:15:34 PM]  ERROR  RollupError: [plugin impound] Vue app aliases are not allowed in server runtime. [importing #app from ../../Development/SideProjects/nuxt-open-fetch/dist/runtime/fetch.js]

so how to access the hooks and be able to register them

5 Replies

kapa.ai•2mo ago

Hi @Norbiros. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To access Nitro or Nuxt hooks from a Nuxt module, you should not import useNuxtApp or useNitroApp from #app in your module code. These composables are only available at runtime (in plugins, middleware, or Vue components), not at build/module time. Importing them in a module or server context will cause errors like the one you encountered: "Vue app aliases are not allowed in server runtime" and issues with Rollup or Nitro builds [source]. Correct approach for modules: - In a Nuxt module, you have direct access to the Nuxt instance via the setup function's second argument. - To register Nitro hooks or plugins from a module, use the Nuxt module hooks and Nitro utilities provided by @nuxt/kit. For Nitro hooks/plugins: Use addServerPlugin from @nuxt/kit to register a Nitro plugin from your module. Your Nitro plugin can then use Nitro hooks as needed. Example:

import { defineNuxtModule, createResolver, addServerPlugin } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const { resolve } = createResolver(import.meta.url)
    addServerPlugin(resolve('./runtime/plugin.ts'))
  }
})

import { defineNuxtModule, createResolver, addServerPlugin } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const { resolve } = createResolver(import.meta.url)
    addServerPlugin(resolve('./runtime/plugin.ts'))
  }
})

And in runtime/plugin.ts:

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('request', (event) => {
    // Your logic here
  })
})

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('request', (event) => {
    // Your logic here
  })
})

[addServerPlugin docs] For Nuxt hooks: You can register Nuxt hooks directly using the nuxt.hook method in your module:

export default defineNuxtModule({
  setup(options, nuxt) {
    nuxt.hook('build:done', () => {
      // Your logic here
    })
  }
})

export default defineNuxtModule({
  setup(options, nuxt) {
    nuxt.hook('build:done', () => {
      // Your logic here
    })
  }
})

[Nuxt hooks docs] Summary:
- Do not use useNuxtApp or useNitroApp in modules or server code. - Use the Nuxt instance (nuxt) in your module's setup function to register hooks. - Use addServerPlugin to add Nitro plugins, and register Nitro hooks inside those plugins. If you need to access hooks at runtime (in plugins or components), then useNuxtApp or useNitroApp is appropriate, but not in modules or build-time code. If you need more advanced access to the Nitro instance from a module, you can use useNitro() after the ready hook:

import { useNitro } from '@nuxt/kit'

nuxt.hook('ready', () => {
  const nitro = useNitro()
  // Do something with Nitro instance
})

import { useNitro } from '@nuxt/kit'

nuxt.hook('ready', () => {
  const nitro = useNitro()
  // Do something with Nitro instance
})

[useNitro docs] Bottom line:
Register hooks in the right context—modules for build-time, plugins for runtime. Avoid runtime composables in build/module code. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@770620808644919307> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

NorbirosOP•2mo ago

@kapa.ai I cannot do that, I am providing runtime function that authors of nuxt plugins use. I cannot use This module cannot be imported in server runtime. [importing @nuxt/kit

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but based on the provided knowledge sources, there is no officially documented way to access Nuxt or Nitro hooks at runtime from a function that is meant to be imported and used by other Nuxt plugin authors (i.e., from a shared composable or utility that runs in both client and server, or is imported in userland plugins/components). The knowledge sources clarify: - @nuxt/kit utilities (like useNitro, addServerPlugin, etc.) are only available in Nuxt modules at build time, not at runtime or in server routes, plugins, or components. Attempting to import them in runtime code will cause errors [Nuxt Kit docs]. - useNuxtApp and useNitroApp are composables for runtime context, but they cannot be imported or used in server runtime code outside of their intended context (plugins, components, etc.). Importing them in a shared runtime utility or composable that is used in both client and server will result in errors like "Vue app aliases are not allowed in server runtime" [useNuxtApp docs]. Summary:
- There is no supported way, according to the official documentation and examples, to provide a runtime function that exposes Nuxt or Nitro hooks for plugin authors to use, without running into the import/runtime context limitations you described. - The recommended and supported way to register hooks is: - In Nuxt modules (build time): use nuxt.hook (Nuxt hooks) or addServerPlugin (for Nitro hooks). - In plugins/components (runtime): use useNuxtApp for Nuxt app hooks, but not for Nitro hooks. If you need to expose hooks to plugin authors, you may need to reconsider your architecture to fit within these constraints, or provide clear documentation that your utility must only be used in the correct context (e.g., inside a plugin or component, not in server runtime or module code). If you have a more specific use case or context, please clarify, but the knowledge sources do not provide a solution for your described scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@770620808644919307> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Access nitro/nuxt hooks from nuxt module

Did you find this page helpful?