feat: DrupalImage component for rendering responsive images hosted by Drupal

Author: luksak

src/index.ts

@@ -1,6 +1,9 @@
 import { useImageUrl } from './composables/index.js';
+import { DrupalImage } from './runtime/components/index.js';
+import type { ImageStyle } from './types/index.js';
 
-export { useImageUrl };
+export { useImageUrl, DrupalImage };
+export type { ImageStyle };
 
 // Export the module as default export
 export { default } from './module.js';

src/module.ts

@@ -16,9 +16,10 @@ export default defineNuxtModule<ModuleOptions>({
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
-    // Add composables auto-import
+    // Add composables and components auto-import
     nuxt.hook('imports:dirs', (dirs) => {
       dirs.push(resolver.resolve('./composables'))
+      dirs.push(resolver.resolve('./runtime/components'))
     })
 
     // Add plugin to support Nuxt 2 with Bridge

src/runtime/components/DrupalImage.vue

@@ -0,0 +1,97 @@
+<template>
+  <picture>
+    <source :data-srcset="srcSetWebp" type="image/webp" sizes="auto">
+    <source :data-srcset="srcSetDefault" type="image/jpeg" sizes="auto">
+    <img
+      ref="img"
+      data-sizes="auto"
+      :alt="alt || altFallback"
+      :width="width || undefined"
+      :height="height || undefined"
+      class="lazyload"
+      src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+    >
+  </picture>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { useImageUrl } from '../../composables/index.js'
+import type { ImageStyle } from '../../types/index.js'
+
+const img: Ref<HTMLImageElement | null> = ref(null)
+const imageStyleBase = 'default'
+
+export interface Props {
+  uri: string
+  width?: number | null
+  height?: number | null
+  alt?: string
+  altFallback?: string
+  sizes?: string
+  imageStyles?: ImageStyle[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: null,
+  height: null,
+  alt: '',
+  altFallback: '',
+  sizes: '100vw',
+  imageStyles: () => {
+    return [
+      { name: `${imageStyleBase}_xs`, width: 320 },
+      { name: `${imageStyleBase}_s`, width: 640 },
+      { name: `${imageStyleBase}_m`, width: 960 },
+      { name: `${imageStyleBase}_l`, width: 1280 },
+      { name: `${imageStyleBase}_xl`, width: 1440 },
+      { name: `${imageStyleBase}_xxl`, width: 1920 },
+      { name: `${imageStyleBase}_xxxl`, width: 2560 }
+    ]
+  }
+})
+
+const srcSetWebp = computed(() => {
+  return srcSet('.webp')
+})
+
+const srcSetDefault = computed(() => {
+  return srcSet()
+})
+
+function srcSet (suffix: string = ''): string {
+  const srcSet: string[] = []
+  props.imageStyles.forEach((imageStyle) => {
+    const imageUrl = buildImageUrl(imageStyle, suffix)
+    if (typeof imageUrl === 'string') {
+      srcSet.push(imageUrl)
+    }
+  })
+  return srcSet.join(', ')
+}
+
+function buildImageUrl (style: ImageStyle, suffix: string = ''): string|null {
+  if (typeof props.uri === 'string') {
+    return `${useImageUrl(props.uri, style.name)}${suffix} ${
+    style.width
+  }w`
+  }
+  return null
+}
+
+watch(
+  () => props.uri,
+  () => {
+    img.value?.classList.add('lazyload')
+  }
+)
+</script>
+
+<style scoped>
+picture,
+img {
+  display: block;
+  width: 100%;
+}
+</style>

src/runtime/components/index.ts

@@ -0,0 +1 @@
+export { default as DrupalImage } from './DrupalImage.vue'

src/runtime/plugin.ts

@@ -1,10 +1,12 @@
 import useImageUrl from '../composables/useImageUrl.js';
+import { DrupalImage } from './components/index.js';
 
 // Type declarations for Nuxt plugin system
 declare const defineNuxtPlugin: (fn: (nuxtApp: any) => void) => any
 
 export default defineNuxtPlugin((nuxtApp: any) => {
-  // Make composables available via the nuxtApp instance
+  // Make composables and components available via the nuxtApp instance
   // This is mainly for Nuxt 2 compatibility
   nuxtApp.provide('useImageUrl', useImageUrl)
+  nuxtApp.vueApp?.component('DrupalImage', DrupalImage)
 })

src/types/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Type definitions for the nuxt-drupal-image package
+ */
+
+/**
+ * Represents an image style configuration
+ */
+export interface ImageStyle {
+  name: string;
+  width: number;
+}