feat: AcfImage / AcfMedia with @nuxt/image

wp-content/themes/headless/app/components/acf/AcfMedia.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { tv } from "tailwind-variants";
+
+import type { AcfMediaFragment } from "#graphql/types";
+
+const props = defineProps<{ media: AcfMediaFragment }>();
+
+const tvAcfMedia = tv({
+  slots: {
+    image: "w-full",
+  },
+  variants: {
+    aspectRatio: {
+      square: { image: "aspect-[1/1]" },
+      video: { image: "aspect-video" },
+      portrait: { image: "aspect-[2/3]" },
+      auto: { image: "aspect-auto" },
+    },
+    objectFit: {
+      cover: { image: "object-cover" },
+      contain: { image: "object-contain" },
+    },
+  },
+  defaultVariants: {
+    aspectRatio: "auto",
+    objectFit: "cover",
+  },
+});
+
+const classes = tvAcfMedia(props.media);
+</script>
+
+<template>
+  <AcfImage :image="media.image.node" :class="classes.image()" />
+</template>