N
Nuxt•4mo ago
cyberpunks

How to reference custom logic when adding a template in my own Nuxt module?

Hi, question for the module authors among us, I'd like to expose custom functionality in a template I am adding using addTemplate({...}), right before it I am calling my addPlugin(resolver.resolve(...)). Since this is going to be accessible through #build I do not know how to import it correctly? I've looked at existing code and it seems to be possible to import stuff from # and stuff installed in your package.json. How could I make my own #my-module module and expose it through there? I hope my question makes sense, thanks in advance. Here's the relevant code: 
  setup(_options, _nuxt) {
    const resolver = createResolver(import.meta.url)

    addPlugin(resolver.resolve('./runtime/plugin'))
    addTemplate({
      filename: 'special-fetch.mjs',
      getContents: () => {
        return [
          'import { $fetch } from \'ofetch\'',
          'import { onSpecialFetchRequest } from \'#this-does-not-exist-yet\'',
          'import { baseURL } from \'#internal/nuxt/paths\'',
          'if (!globalThis.$specialFetch) {',
          '  globalThis.$specialFetch = $fetch.create({',
          '    baseURL: baseURL(),',
          '    onRequest: onSpecialFetchRequest ,',
          '  })',
          '}',
        ].join('\n')
      },
    })
  },
  setup(_options, _nuxt) {
    const resolver = createResolver(import.meta.url)

    addPlugin(resolver.resolve('./runtime/plugin'))
    addTemplate({
      filename: 'special-fetch.mjs',
      getContents: () => {
        return [
          'import { $fetch } from \'ofetch\'',
          'import { onSpecialFetchRequest } from \'#this-does-not-exist-yet\'',
          'import { baseURL } from \'#internal/nuxt/paths\'',
          'if (!globalThis.$specialFetch) {',
          '  globalThis.$specialFetch = $fetch.create({',
          '    baseURL: baseURL(),',
          '    onRequest: onSpecialFetchRequest ,',
          '  })',
          '}',
        ].join('\n')
      },
    })
  },
2 Replies
kapa.ai
kapa.ai•4mo ago
Hi @cyberpunks. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To expose custom logic from your Nuxt module and reference it in a template you add with addTemplate, you should place your logic in a file within your module's runtime directory and then use the appropriate alias to import it in your generated template. Here's how you can do it: 1. Place your logic in the runtime directory:
For example, create a file at runtime/onSpecialFetchRequest.ts in your module. 2. Reference it using the #build alias in your template:
When you use addTemplate, the file you generate will be available under the #build alias. If you want to expose your own alias (like #my-module), you need to use addTemplate or addServerTemplate with a filename that starts with your custom alias, e.g., #my-module/onSpecialFetchRequest.mjs. Then, in your generated template, you can import from #my-module/onSpecialFetchRequest. Example: 
import { defineNuxtModule, addTemplate, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(_options, _nuxt) {
    const resolver = createResolver(import.meta.url)

    // Add your custom logic as a template (or copy from runtime)
    addTemplate({
      filename: '#my-module/onSpecialFetchRequest.mjs',
      getContents: () => 'export function onSpecialFetchRequest() { /* ... */ }'
    })
// Reference it in your generated template
    addTemplate({
      filename: 'special-fetch.mjs',
      getContents: () => [
        'import { $fetch } from \'ofetch\'',
        'import { onSpecialFetchRequest } from \'#my-module/onSpecialFetchRequest\'',
        'import { baseURL } from \'#internal/nuxt/paths\'',
        'if (!globalThis.$specialFetch) {',
        '  globalThis.$specialFetch = $fetch.create({',
        '    baseURL: baseURL(),',
        '    onRequest: onSpecialFetchRequest ,',
        '  })',
        '}',
      ].join('\n')
    })
  }
})
import { defineNuxtModule, addTemplate, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(_options, _nuxt) {
    const resolver = createResolver(import.meta.url)

    // Add your custom logic as a template (or copy from runtime)
    addTemplate({
      filename: '#my-module/onSpecialFetchRequest.mjs',
      getContents: () => 'export function onSpecialFetchRequest() { /* ... */ }'
    })
// Reference it in your generated template
    addTemplate({
      filename: 'special-fetch.mjs',
      getContents: () => [
        'import { $fetch } from \'ofetch\'',
        'import { onSpecialFetchRequest } from \'#my-module/onSpecialFetchRequest\'',
        'import { baseURL } from \'#internal/nuxt/paths\'',
        'if (!globalThis.$specialFetch) {',
        '  globalThis.$specialFetch = $fetch.create({',
        '    baseURL: baseURL(),',
        '    onRequest: onSpecialFetchRequest ,',
        '  })',
        '}',
      ].join('\n')
    })
  }
})
Key points: - Use addTemplate to create virtual files and give them a custom alias by setting the filename (e.g., #my-module/your-file.mjs). - Import your logic in other templates using that alias (e.g., import { onSpecialFetchRequest } from '#my-module/onSpecialFetchRequest'). This approach is documented in the Nuxt module author guide, which shows how to add templates/virtual files and import them using the #build or custom aliases you define with the filename property in addTemplate or addServerTemplate Adding Templates/Virtual Files addServerTemplate API. If you want to expose runtime logic from your module's runtime directory, you can also use the createResolver utility to resolve the path and add it as a plugin or template as needed. If you need the file to be available on the server side only, use addServerTemplate instead of addTemplate. Let me know if you need a more specific example for your use case! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@1024041668212695152> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?