Nuxt/Image Shopify Provider

nuxt.config.js

export default {
  image: {
    providers: {
      shopify: {
        provider: '~/providers/shopify',
        options: {}
      }
    }
  },
}

shopify-provider.js

/*
@nuxt/image - custom Shopify provider
*/
import { joinURL } from 'ufo'

export function getImage(src, { modifiers, baseURL } = {}, { options, nuxtContext, $img }) {
  const { width, height, format, fit, ...providerModifiers } = modifiers

  // base URL
  const urlStart = src.substring(0, src.lastIndexOf("/") + 1);
  const urlEnd = src.substring(src.lastIndexOf("/") + 1, src.length);
  let fileName = urlEnd.split('.')[0]

  // modify URL
  if( 'width' in modifiers && 'height' in modifiers ) {
    fileName = `${fileName}_${modifiers.width}x${modifiers.height}`
  }
  if( 'fit' in modifiers && modifiers.fit == 'crop' ) {
    fileName = `${fileName}_crop_center`
  }
  if( 'format' in modifiers ) {
    fileName = `${fileName}.${urlEnd.split('.')[1]}.${modifiers.format}`
  }

  // final URL
  return {
    url: joinURL(urlStart, fileName)
  }
}