How to use providers with Vue?

[MickL]

I tried everything for hours but I just cant make it work to use <Image> from @unpic/vue with any provider.

For example, for Cloudflare one needs to provide imageId and accountHash, and optionally the baseUrl can be changed (Cloudflare default is https://imagedelivery.net).

I tried everything but the docs are very confusing.

1. With options I get "Invalid Cloudflare Images URL":

<script setup lang="ts">
import {Image} from '@unpic/vue';
</script>

<template>
<Image
   sizes="(min-width: 768px) 100px, 50px"
   cdn="cloudflare_images"
   :options="{
      cloudflare_images: {
         host: 'https://imagedelivery.net',
         accountHash: 'my-account-hash-123',
         imageId: 'my-image-id-123'
      }
   }"
/>
</template>

2. The Vue component also doesnt have a transformer prop as shown in the docs:

<script setup lang="ts">
import {Image} from '@unpic/vue';
import { transform } from 'unpic/providers/cloudflare_images';
</script>

<template>
<Image
   sizes="(min-width: 768px) 100px, 50px"
   src="my-image-id-123"
   :transformer="transform"
   :options="{
      cloudflare_images: {
         host: 'https://imagedelivery.net',
         accountHash: 'my-account-hash-123',
         imageId: 'my-image-id-123'
      }
   }"
/>
</template>

3. The only thing that worked is to use generate function from the providers, but this would make <Image> component totally useless as sizes props has no effect:

<script setup lang="ts">
import {Image} from '@unpic/vue';
import {generate} from "unpic/providers/cloudflare_images";
</script>

<template>
<Image
   sizes="(min-width: 768px) 100px, 50px"
   :src="generate('', {}, { imageId: 'my-image-id-123', accountHash: 'my-account-hash-123' })"
/>
</template>