Random Provider

Example of creating a random provider to fetch a random image on Unsplash.

Let's create a ./providers/random/ directory with two files inside:

  • index.js: our entry point for our provider, exporting runtime and runtimeOptions
  • runtime.js: our runtime sending back an url
~/providers/random/index.js
export default function (providerOptions) {
  return {
    runtime: require.resolve('./runtime'),
    runtimeOptions: providerOptions
  }
}
~/providers/random/runtime.js
export default {
  getImage(src, modifiers, options) {
    return {
      url: 'https://source.unsplash.com/random/600x400'
    }
  }
}

Let's use our random provider in our Nuxt application:

nuxt.config.js
export default {
  image: {
    providers: {
      random: '~/providers/random'
    }
  }
}
~/pages/index.js
<template>
  <nuxt-image src="random:/" width="600" height="400" />
</template>