@devite/nuxt-sanity 2.2.1 → 2.3.1

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@devite/nuxt-sanity",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "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.2.1";
+const version = "2.3.1";
 
 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,14 +16,22 @@
 
 <script setup lang="ts">
 import type { ImageAsset, Reference } from '@sanity/types'
-import type { Ref } from 'vue'
 import { resolveImageAssetById } from '../utils/resolveImageAssetById'
+import { useLazyAsyncData, useAsyncData, useId } from '#imports'
 
-const { asset, loading = 'lazy' } = defineProps<{
-  asset?: ImageAsset | Reference
+const props = defineProps<{
+  asset?: ImageAsset | Reference | null
   loading?: 'eager' | 'lazy'
 }>()
-const imageAsset: Ref<ImageAsset | null> | ImageAsset | undefined = asset?._ref
-  ? await resolveImageAssetById((asset as Reference)._ref)
-  : (asset as ImageAsset | undefined)
+
+const { data: imageAsset } = await (
+  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] },
+)
 </script>

package/package.json

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