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 :)

[leemev91]

Hi @momi-aura @Baroshem

Apologies bumping this (as it's already been answered in some form) but I've just ran into a similar use case and have managed to get it working via the installModule method, it was quite similar to @momi-aura approach, just had to step the object up one and resolve the file.

await installModule('@nuxt/image', {
    providers: {
        yourProviderName: {
            provider: resolve('./runtime/providers/yourProviderName'),
            options: {
            },
        },
    },
})

I have components in my module too, they just wrap NuxtImg, where I set provider there manually - but I can use this provider (when installed) on standard NuxtImg components too.

I added @nuxt/image to my modules peerDependencies, and when installing on a nuxt site, this might be obvious but, I noticed if you have for example

modules: ['@nuxt/image', '@your-custom-module'],

This conflicts, as your module is installing @nuxt/image - make sure to remove it from the modules.

My work is still in a PR internally, but have tested a ton of use cases and it seems to be working well.

[DMOShareIT]

Hey @momi-aura could you share your umbraco-image-provider? Would be great to add to nuxt image.

[momi-aura]

Yes, sorry i never got around to it, i'll try and find time to share it :)

[jemomi]

Hey @momi-aura could you share your umbraco-image-provider? Would be great to add to nuxt image.

@DMOShareIT i have created a draft PR. And will take it out of draft in the coming days. I would however like to first have a stable and proper image source for testing

#2165