Migrate to SCAYLE image provider

Requirements

To use @scayle/nuxt-image-provider, ensure you meet the following requirements:

• Nuxt: Version 3 or later.
• @nuxt/image: Installed and configured as a module in your Nuxt project.

Install SCAYLE Image Provider

sh

Copy

yarn add @scayle/nuxt-image-provider

Update Nuxt Configuration

AfterBefore

Copy

export default defineNuxtConfig({
  modules: [
    '@scayle/nuxt-image-provider'
  ],
  image: {
    providers: {
      scayle: {
        name: 'scayle',
        provider: '@scayle/nuxt-image-provider',
      },
    },
  },
})

The remaining legacy provider in the SFB under ~/providers/scayle can be removed.

Update components

All NuxtImg and NuxtPicture compents with the scayle provider should be change as follows.

NuxtImg to ScayleImg

AfterBefore

Copy

<ScayleImg src="/images/sample.jpg" :width="300" brightness="1" should-trim />

NuxtPicture to ScaylePicture

AfterBefore

Copy

<ScaylePicture src="/images/sample.jpg" :sizes="sizes" />