Using custom image provider in a nuxt module for multiple projects

[momi-aura]

I am creating a nuxt module component library, that will be used in multiple projects, and would therefore really like to have the custom image provider in there.

here is the provider from my component-library:

import type {ProviderGetImage} from '@nuxt/image';
import {joinURL} from 'ufo';
import {createOperationsGenerator} from '@nuxt/image/dist/runtime/utils';

const operationsGenerator = createOperationsGenerator({
  keyMap: {
    width: 'width',
    height: 'height',
    rxy: 'rxy'
  }
})

export const getImage: ProviderGetImage = (src, { modifiers = {}, baseUrl } = {}) => {
  if (!baseUrl) {
    baseUrl = ''
  }

  const operations = operationsGenerator(modifiers)

  return {
    url: joinURL(baseUrl, src + (operations ? '?' + operations : '')),
  }
}

And the nuxt.config (partially) from a project that will use it:

export default defineNuxtConfig({
modules: [
    '@vueuse/nuxt',
    '@library-ui/components',
    '@nuxt/image',
  ],
  devtools: { enabled: true },
image: {
    providers: {
      umbracoImageProvider: {
        name: 'umbracoImageProvider',
        provider: 'node_modules/@library-ui/components/dist/runtime/providers/umbraco-image-provider',
        options: {
        }
      }
    },
    provider: 'umbracoImageProvider'
  }
})

Any ideas and suggestions are welcome :)

[Baroshem]

Hey there, what about adding image module to the library module that you have created and register the custom provider there?

You can use the utility installModule from @nuxt/kit that accepts module options as a second parameter.

Example from Nuxt Security: https://github.com/nuxt-modules/security/blob/d46279ae884d5fea4431168a61a112abbd77caea/src/module.ts#L181

[momi-aura]

I tried that, but couldn't make it work, but i'll try again and get back :)

[momi-aura]

I added this to my library module inside module.ts:

await installModule("@nuxt/image", {
      image: {
        providers: {
          umbracoImageProvider: {
            name: 'umbracoImageProvider',
            provider: '~/providers/umbraco-image-provider.ts',
            options: {
            }
          }
        },
        provider: 'umbracoImageProvider'
      }
    });

But it doen't register inside my other project

I also tried adding this to the project nuxt.config:

image: {
    provider: 'umbracoImageProvider'
  }

[momi-aura]

@Baroshem sorry forgot to tag you, while responding to you :)

[Baroshem]

Hey @momi-aura I have converted this issue into a discussion.

Are you having issues with adding a custom module to the main nuxt project or with the fact that the custom provider is not registered properly? Does this custom provider work if you try it in the module playground? Is the module published as an external npm package or is it just local module?

[momi-aura]

Hi @Baroshem
I found a "solution". But forgot to update this :)

I added addImportsDir(resolve(runtimeDir, 'providers')) to my module.ts. And now i can use the custom provider like this:

image: {
    providers: {
      umbracoImageProvider: {
        name: 'umbracoImageProvider',
        provider: 'node_modules/@library-ui/components/dist/runtime/providers/umbraco-image-provider',
        options: {
        }
      }
    }
  }

So it somewhat solves the issue i was having, i would however have prefered if it was possible for me to register the provider inside my module, and then just use it directly inside my other projects :)