@devite/nuxt-sanity 1.1.2 → 1.2.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@devite/nuxt-sanity",
   "configKey": "@devite/nuxt-sanity",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "unknown"

package/dist/runtime/components/SanityComponent.vue

@@ -10,29 +10,29 @@
 
 <script setup lang="ts">
 import type { Component } from '@nuxt/schema'
-import { resolveComponent } from '#imports'
+import { computed, resolveComponent } from '#imports'
 import { SanityLinkExternal, SanityLinkInternal, SanityRichText } from '#components'
 
-const props = defineProps<{ data?: object }>()
+const { data } = defineProps<{ data?: object }>()
 
-const type = props.data?._type
-let component: Component
+const component = computed<Component>(() => {
+  const type = data?._type
 
-switch (type) {
-  case 'linkInternal':
-    component = SanityLinkInternal
-    break
-  case 'linkExternal':
-    component = SanityLinkExternal
-    break
-  default:
-    if (props.data?.constructor.name === 'Array' && props.data.every(item => item._type === 'block'))
-      component = SanityRichText
-    else if (type) {
-      const upperCamelCase = type.charAt(0).toUpperCase() + type.slice(1)
-      component = resolveComponent('Sanity' + upperCamelCase)
-    }
+  switch (type) {
+    case 'linkInternal':
+      return SanityLinkInternal
+    case 'linkExternal':
+      return SanityLinkExternal
+    default:
+      if (data?.constructor.name === 'Array' && data.every(item => item._type === 'block'))
+        return SanityRichText
+      else if (type) {
+        const upperCamelCase = type.charAt(0).toUpperCase() + type.slice(1)
 
-    break
-}
+        return resolveComponent('Sanity' + upperCamelCase)
+      }
+  }
+
+  return null
+})
 </script>

package/dist/runtime/components/SanityImageAsset.vue

@@ -1,14 +1,14 @@
 <template>
   <NuxtImg
-    v-if="asset?._id"
+    v-if="imageAsset?._id"
     densities="x1 x2"
-    :src="asset._id"
-    :width="asset.metadata.dimensions.width"
-    :height="asset.metadata.dimensions.height"
-    :alt="asset.altText"
-    :placeholder="asset.metadata.lqip"
+    :src="imageAsset._id"
+    :width="imageAsset.metadata.dimensions.width"
+    :height="imageAsset.metadata.dimensions.height"
+    :alt="imageAsset.altText"
+    :placeholder="imageAsset.metadata.lqip"
     :loading="loading"
-    :format="asset.mimeType === 'image/svg+xml' ? undefined : 'webp'"
+    :format="imageAsset.mimeType === 'image/svg+xml' ? undefined : 'webp'"
     draggable="false"
   />
 </template>
@@ -16,5 +16,6 @@
 <script setup lang="ts">
 import type { ImageAsset } from '@sanity/types'
 
-const { loading = 'lazy' } = defineProps<{ asset: ImageAsset, loading?: 'lazy' | 'eager' }>()
+const { asset, loading = 'lazy' } = defineProps<{ asset?: ImageAsset, loading?: 'lazy' | 'eager' }>()
+const imageAsset = asset?._ref ? await resolveImageAssetById(asset._ref) : asset
 </script>

package/dist/runtime/components/SanityPage.vue

@@ -24,24 +24,26 @@ import { computed } from '#imports'
 const { baseURL } = useRuntimeConfig().public
 
 const path = useRoute().fullPath
-const groqFilter = path === '/' ? '_type == "home"' : `_type == "page" && slug.current == "${path.substring(1)}"`
-const { data: sanityData } = await useSanityQuery<Home | Page | NotFound>(groq`*[(${groqFilter}) || _type == "notFound"][0] { _id, _type, title, modules, seo { _type, indexable, title, shortTitle, description, image ${IMAGE_WITHOUT_PREVIEW_PROJECTION} } }`)
+const groqFilter = path === '/' ? '_type == "home"' : `_type == "page" && slug.current == $slug`
+const { data: sanityData } = await useSanityQuery<Home | Page | NotFound>(groq`*[(${groqFilter}) || _type == "notFound"][0] { _id, _type, title, modules, seo { _type, indexable, title, shortTitle, description, image ${IMAGE_WITHOUT_PREVIEW_PROJECTION} } }`, { slug: path.substring(1) })
 
 const seo = computed(() => sanityData.value?.seo)
 const url = computed(() => baseURL + (sanityData.value?.slug || '/'))
 
 const { data: globalSEO } = await useSanityQuery<GlobalSEO>(groq`*[_type == 'settings'][0].seo { siteName, image ${IMAGE_WITHOUT_PREVIEW_PROJECTION} }`)
 const image: ComputedRef<ImageAsset> = computed(() => sanityData.value?.image?.asset || globalSEO.value?.image?.asset)
+const imageUrl = computed(() => image.value?.url)
+const imageDimensions = computed(() => image.value?.metadata.dimensions)
 
 useHead({
   meta: [
     { name: 'site_name', content: () => globalSEO.value?.siteName },
-    { name: 'og:image', content: () => image.value?.url },
-    { name: 'og:image:width', content: () => image.value?.metadata.dimensions.width },
-    { name: 'og:image:height', content: () => image.value?.metadata.dimensions.height },
-    { name: 'twitter:image', content: () => image.value?.url },
-    { name: 'twitter:image:width', content: () => image.value?.metadata.dimensions.width },
-    { name: 'twitter:image:height', content: () => image.value?.metadata.dimensions.height },
+    { name: 'og:image', content: () => imageUrl.value },
+    { name: 'og:image:width', content: () => imageDimensions.value?.width },
+    { name: 'og:image:height', content: () => imageDimensions.value?.height },
+    { name: 'twitter:image', content: () => imageUrl.value },
+    { name: 'twitter:image:width', content: () => imageDimensions.value?.width },
+    { name: 'twitter:image:height', content: () => imageDimensions.value?.height },
     { name: 'og:url', content: () => url.value },
     { name: 'twitter:url', content: () => url.value },
   ],
@@ -51,7 +53,7 @@ useHead({
 })
 
 useSeoMeta({
-  robots: () => ((seo.value?.indexable ? '' : 'no') + 'index,follow'),
+  robots: () => `${seo.value?.indexable ? '' : 'no'}index,follow`,
   title: () => seo.value?.title,
   description: () => seo.value?.description,
   ogTitle: () => seo.value?.shortTitle,

package/dist/runtime/utils/resolveImageAssetById.d.ts

@@ -1,2 +1,3 @@
 import type { ImageAsset } from '@sanity/types';
-export declare const resolveImageAssetById: (id: string) => Promise<ImageAsset | undefined>;
+import type { Ref } from '#imports';
+export declare const resolveImageAssetById: (id: string) => Promise<Ref<ImageAsset | undefined>>;

package/dist/runtime/utils/resolveImageAssetById.js

@@ -1,5 +1,5 @@
 import { useSanityQuery } from "@nuxtjs/sanity/runtime/composables";
 import { IMAGE_ASSET_PROJECTION } from "./projections.js";
 export const resolveImageAssetById = async (id) => {
-  return (await useSanityQuery(`*[_type == "sanity.imageAsset" && _id == $assetId][0] ${IMAGE_ASSET_PROJECTION}`, { assetId: id })).data.value;
+  return (await useSanityQuery(`*[_type == "sanity.imageAsset" && _id == $assetId][0] ${IMAGE_ASSET_PROJECTION}`, { assetId: id })).data;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@devite/nuxt-sanity",
-  "version": "1.1.2",
-  "description": "Optimizes the configuration for @nuxt/sanity and provides additional helper components.",
+  "version": "1.2.0",
+  "description": "Provides additional helper components and utilities for the Nuxt.js Sanity module",
   "repository": "devite-io/nuxt-sanity",
   "license": "MIT",
   "author": {
@@ -22,20 +22,22 @@
     "dist"
   ],
   "dependencies": {
+    "@nuxt/image": "^1.8.0",
     "@nuxt/kit": "^3.13.2",
     "@nuxtjs/sanity": "^1.12.1",
-    "@sanity/types": "^3.57.3"
+    "@portabletext/vue": "^1.0.11",
+    "@sanity/client": "^6.22.0",
+    "@sanity/types": "^3.59.0"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.4.2",
+    "@nuxt/devtools": "^1.5.1",
     "@nuxt/eslint-config": "^0.5.7",
     "@nuxt/module-builder": "^0.8.4",
     "@nuxt/schema": "^3.13.2",
     "@nuxt/test-utils": "^3.14.2",
-    "@portabletext/vue": "^1.0.11",
     "@types/node": "latest",
-    "changelogen": "^0.5.5",
-    "eslint": "^9.10.0",
+    "changelogen": "^0.5.7",
+    "eslint": "^9.11.1",
     "nuxt": "^3.13.2",
     "typescript": "latest",
     "vitest": "^2.1.1",