feat(vue,nuxt)!: rename @loaded to @image-load and add @image-error

- Emit names align with the core option names (`onImageLoad`, `onImageError`).
- The declared `error` emit is removed; native `@error` listeners now fall
  through via Vue attribute fallthrough and also fire for the synthetic
  preload failure dispatched on the visible `<img>`.
- The components capture `triggerLoad`'s disposer so unmount during an
  in-flight preload no longer fires callbacks on a destroyed instance.

Author: johannschopplich

docs/integrations/nuxt.md

@@ -81,8 +81,8 @@ The component also accepts all standard `<img>` HTML attributes via Nuxt's attri
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| `loaded` | `HTMLImageElement` | Emitted when the image has been successfully loaded. |
-| `error` | `Event` | Emitted when an error occurs during image loading. |
+| `image-load` | `HTMLImageElement` | Fired once when the real image finishes loading. |
+| `image-error` | `HTMLImageElement, Event` | Fired when the preload fails. See [migration notes](/guide/migration#native-img-error-now-fires-on-preload-failure) for native `@error` behavior. |
 
 ### Server-Side Rendering
 

docs/integrations/vue.md

@@ -77,8 +77,8 @@ The component also accepts all standard `<img>` HTML attributes via Vue's attrib
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| `loaded` | `HTMLImageElement` | Emitted when the image has been successfully loaded. |
-| `error` | `Event` | Emitted when an error occurs during image loading. |
+| `image-load` | `HTMLImageElement` | Fired once when the real image finishes loading. |
+| `image-error` | `HTMLImageElement, Event` | Fired when the preload fails. See [migration notes](/guide/migration#native-img-error-now-fires-on-preload-failure) for native `@error` behavior. |
 
 ### Reactivity
 

packages/nuxt/playground/app/app.vue

@@ -11,7 +11,7 @@ useHead({
   title: '@unlazy/nuxt',
 })
 
-function onLoaded(image: HTMLImageElement) {
+function onImageLoad(image: HTMLImageElement) {
   console.log('Image loaded:', image.src)
 }
 </script>
@@ -28,7 +28,7 @@ function onLoaded(image: HTMLImageElement) {
           src="/images/fall-evan-wallace.jpg"
           width="640"
           height="427"
-          @loaded="onLoaded"
+          @image-load="onImageLoad"
         />
       </section>
 

packages/nuxt/playground/nuxt.config.ts

@@ -18,6 +18,13 @@ export default defineNuxtConfig({
     },
 
     optimizeDeps: {
+      include: [
+        '@vue/devtools-core',
+        '@vue/devtools-kit',
+        'fast-blurhash',
+        'thumbhash',
+      ],
+
       exclude: [
         '@unlazy/core',
         'unlazy',

packages/nuxt/src/runtime/components/UnLazyImage.vue

@@ -71,8 +71,8 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  (event: 'loaded', image: HTMLImageElement): void
-  (event: 'error', error: Event): void
+  (event: 'imageLoad', image: HTMLImageElement): void
+  (event: 'imageError', image: HTMLImageElement, error: Event): void
 }>()
 
 const unlazy = useRuntimeConfig().public.unlazy as ModuleOptions
@@ -121,7 +121,10 @@ watchEffect(() => {
   if (props.preload) {
     if (props.autoSizes)
       _autoSizes(target.value)
-    triggerLoad(target.value, image => emit('loaded', image))
+    cleanup = triggerLoad(target.value, {
+      onImageLoad: image => emit('imageLoad', image),
+      onImageError: (image, error) => emit('imageError', image, error),
+    })
     return
   }
 
@@ -131,9 +134,8 @@ watchEffect(() => {
   // Placeholder is already decoded
   cleanup = lazyLoad(target.value, {
     hash: false,
-    onImageLoad(image) {
-      emit('loaded', image)
-    },
+    onImageLoad: image => emit('imageLoad', image),
+    onImageError: (image, error) => emit('imageError', image, error),
   })
 })
 
@@ -159,7 +161,6 @@ onBeforeUnmount(() => {
       :data-srcset="srcSet"
       :data-sizes="autoSizes ? 'auto' : undefined"
       :loading="loading || (props.lazyLoad ? 'lazy' : 'eager')"
-      @error="emit('error', $event)"
     >
   </picture>
   <img
@@ -171,6 +172,5 @@ onBeforeUnmount(() => {
     :data-srcset="srcSet"
     :data-sizes="autoSizes ? 'auto' : undefined"
     :loading="loading || (props.lazyLoad ? 'lazy' : 'eager')"
-    @error="emit('error', $event)"
   >
 </template>

packages/vue/playground/App.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { UnLazyImage } from '../src/components'
 
-function onLoaded(image: HTMLImageElement) {
+function onImageLoad(image: HTMLImageElement) {
   console.log('Image loaded:', image.src)
 }
 
-function onError(error: Event) {
-  console.error('Image error:', error)
+function onImageError(image: HTMLImageElement, error: Event) {
+  console.error('Image error:', image.src, error)
 }
 </script>
 
@@ -21,8 +21,8 @@ function onError(error: Event) {
         src="/images/fall-evan-wallace.jpg"
         width="640"
         height="427"
-        @loaded="onLoaded"
-        @error="onError"
+        @image-load="onImageLoad"
+        @image-error="onImageError"
       />
     </section>
 

packages/vue/src/components/UnLazyImage.vue

@@ -34,8 +34,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (event: 'loaded', image: HTMLImageElement): void
-  (event: 'error', error: Event): void
+  (event: 'imageLoad', image: HTMLImageElement): void
+  (event: 'imageError', image: HTMLImageElement, error: Event): void
 }>()
 
 const target = ref<HTMLImageElement | undefined>()
@@ -50,15 +50,19 @@ watchEffect(() => {
   if (props.preload) {
     if (props.autoSizes)
       _autoSizes(target.value)
-    triggerLoad(target.value, image => emit('loaded', image))
+    cleanup = triggerLoad(target.value, {
+      onImageLoad: image => emit('imageLoad', image),
+      onImageError: (image, error) => emit('imageError', image, error),
+    })
     return
   }
 
   cleanup = lazyLoad(target.value, {
     hash: props.thumbhash || props.blurhash,
     hashType: props.thumbhash ? 'thumbhash' : 'blurhash',
     placeholderSize: props.placeholderSize,
-    onImageLoad: image => emit('loaded', image),
+    onImageLoad: image => emit('imageLoad', image),
+    onImageError: (image, error) => emit('imageError', image, error),
   })
 })
 
@@ -75,6 +79,5 @@ onBeforeUnmount(() => {
     :data-srcset="srcSet"
     :data-sizes="autoSizes ? 'auto' : undefined"
     :loading="loading || 'lazy'"
-    @error="emit('error', $event)"
   >
 </template>