@devite/nuxt-sanity 2.3.0 → 2.3.2

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@devite/nuxt-sanity",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "configKey": "sanity",
   "builder": {
     "@nuxt/module-builder": "0.8.4",

package/dist/module.mjs

@@ -3,7 +3,7 @@ import { defineNuxtModule, createResolver, addPlugin, addServerHandler, addImpor
 import defu from 'defu';
 
 const name = "@devite/nuxt-sanity";
-const version = "2.3.0";
+const version = "2.3.2";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/SanityImageAsset.vue

@@ -1,13 +1,14 @@
 <template>
   <NuxtImg
     v-if="imageAsset?._id"
+    provider="sanity"
     densities="x1 x2"
     :src="imageAsset._id"
     :width="imageAsset.metadata.dimensions.width"
     :height="imageAsset.metadata.dimensions.height"
     :alt="imageAsset.altText"
     :placeholder="loading === 'eager' ? undefined : imageAsset.metadata.lqip"
-    :loading="loading"
+    :loading="loading || 'lazy'"
     :format="imageAsset.mimeType === 'image/svg+xml' ? undefined : 'webp'"
     draggable="false"
   />
@@ -15,22 +16,30 @@
 
 <script setup lang="ts">
 import type { ImageAsset, Reference } from '@sanity/types'
+import { ref, watch } from 'vue'
 import { resolveImageAssetById } from '../utils/resolveImageAssetById'
-import { useLazyAsyncData, useAsyncData, useId } from '#imports'
 
 const props = defineProps<{
   asset?: ImageAsset | Reference | null
   loading?: 'eager' | 'lazy'
 }>()
+const imageAsset = ref<ImageAsset | null>(null)
+let unwatchFunc = undefined as (() => void) | undefined
 
-const { data: imageAsset } = (
-  props.loading !== 'eager' ? useLazyAsyncData : useAsyncData
-)<ImageAsset | null>(
-  useId(),
-  async () =>
-    props.asset?._ref
-      ? (await resolveImageAssetById((props.asset as Reference)._ref)).value
-      : ((props.asset || null) as ImageAsset | null),
-  { watch: [props] },
-)
+async function resolveImageAsset() {
+  if (props.asset?._ref) {
+    const assetRef = await resolveImageAssetById((props.asset as Reference)._ref)
+
+    imageAsset.value = assetRef.value
+
+    unwatchFunc?.()
+    unwatchFunc = watch(assetRef, (updatedAsset) => imageAsset.value = updatedAsset)
+    return
+  }
+
+  imageAsset.value = (props.asset || null) as ImageAsset | null
+}
+
+await resolveImageAsset()
+watch(() => props.asset, resolveImageAsset)
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devite/nuxt-sanity",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Advanced Sanity integration for Nuxt.js.",
   "repository": "devite-io/nuxt-sanity",
   "license": "MIT",