pascalmartineau/wp-headless
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: AcfImage component based on @nuxt/image

Browse Source
This commit is contained in:
Pascal Martineau
2026-01-30 08:48:27 -05:00
parent bff7bce1f1
commit 4918c638ab
5 changed files with 147 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
wp-content/themes/moonshine/app/components/acf/AcfImage.fragment.gql Normal file
View File

@@ -0,0 +1,9 @@
fragment AcfImage on MediaItem {
src: sourceUrl
alt: altText
mediaDetails {
width
height
}
objectPosition
}

18
wp-content/themes/moonshine/app/components/acf/AcfImage.vue Normal file
View File

@@ -0,0 +1,18 @@
<script setup lang="ts">
import type { AcfImageFragment } from "#graphql/operations";
defineProps<{ image?: AcfImageFragment }>();
</script>
<template>
<NuxtImg
v-if="image"
:src="image.src"
:alt="image.alt"
:width="image.mediaDetails?.width"
:height="image.mediaDetails?.height"
:style="{ objectPosition: image.objectPosition || 'center' }"
format="avif,webp"
placeholder
/>
</template>

10
wp-content/themes/moonshine/nuxt.config.ts
View File

@@ -1,5 +1,7 @@
import { version } from "./package.json";
const isDev = process.env.NODE_ENV !== "production";
const siteUrl = process.env.NUXT_SITE_URL;
if (!siteUrl) {
throw new Error(`NUXT_SITE_URL is not defined. Make sure to set it in your build environment variables.`);
@@ -9,6 +11,7 @@ const wpUrl = process.env.NUXT_WP_URL;
if (!wpUrl) {
throw new Error(`NUXT_WP_URL is not defined. Make sure to set it in your build environment variables.`);
}
const wpDomain = new URL(wpUrl).hostname;
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
@@ -16,6 +19,7 @@ export default defineNuxtConfig({
modules: [
"@lewebsimple/nuxt-graphql",
"@nuxt/eslint",
"@nuxt/image",
"@nuxt/ui",
"@nuxtjs/device",
"@nuxtjs/seo",
@@ -103,6 +107,11 @@ export default defineNuxtConfig({
},
},
image: {
...isDev ? {} : { provider: "cloudflare", cloudflare: { baseURL: "/" } },
domains: [wpDomain],
},
robots: {
sitemap: `${wpUrl}/sitemap_index.xml`,
},
@@ -114,5 +123,4 @@ export default defineNuxtConfig({
componentPrefix: "Svg",
defaultImport: "component",
},
});

1
wp-content/themes/moonshine/package.json
View File

@@ -17,6 +17,7 @@
"dependencies": {
"@iconify-json/lucide": "^1.2.87",
"@lewebsimple/nuxt-graphql": "^0.6.7",
"@nuxt/image": "^2.0.0",
"@nuxt/ui": "4.3.0",
"@nuxtjs/device": "4.0.0",
"@nuxtjs/seo": "^3.4.0",

110
wp-content/themes/moonshine/pnpm-lock.yaml generated
View File

@@ -18,6 +18,9 @@ importers:
'@lewebsimple/nuxt-graphql':
specifier: ^0.6.7
version: 0.6.7(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)
'@nuxt/image':
specifier: ^2.0.0
version: 2.0.0(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)
'@nuxt/ui':
specifier: 4.3.0
version: 4.3.0(591bb4b8e9462081241725e97ecb3569)
@@ -867,6 +870,9 @@ packages:
resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@fastify/accept-negotiator@2.0.1':
resolution: {integrity: sha512-/c/TW2bO/v9JeEgoD/g1G5GxGeCF1Hafdf79WPmUlgYiBXummY0oX3VVq4yFkKKVBKDNlaDUYoab7g38RpPqCQ==}
'@fastify/busboy@3.2.0':
resolution: {integrity: sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==}
@@ -1346,6 +1352,10 @@ packages:
'@nuxt/icon@2.2.1':
resolution: {integrity: sha512-GI840yYGuvHI0BGDQ63d6rAxGzG96jQcWrnaWIQKlyQo/7sx9PjXkSHckXUXyX1MCr9zY6U25Td6OatfY6Hklw==}
'@nuxt/image@2.0.0':
resolution: {integrity: sha512-otHi6gAoYXKLrp8m27ZjX1PjxOPaltQ4OiUs/BhkW995mF/vXf8SWQTw68fww+Uric0v+XgoVrP9icDi+yT6zw==}
engines: {node: '>=18.20.6'}
'@nuxt/kit@3.21.0':
resolution: {integrity: sha512-KMTLK/dsGaQioZzkYUvgfN9le4grNW54aNcA1jqzgVZLcFVy4jJfrJr5WZio9NT2EMfajdoZ+V28aD7BRr4Zfw==}
engines: {node: '>=18.12.0'}
@@ -3470,6 +3480,9 @@ packages:
engines: {node: '>=4'}
hasBin: true
cssfilter@0.0.10:
resolution: {integrity: sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==}
cssnano-preset-default@7.0.10:
resolution: {integrity: sha512-6ZBjW0Lf1K1Z+0OKUAUpEN62tSXmYChXWi2NAA0afxEVsj9a+MbcB1l5qel6BHJHmULai2fCGRthCeKSFbScpA==}
engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
@@ -4260,6 +4273,10 @@ packages:
resolution: {integrity: sha512-tAAg/72/VxOUW7RQSX1pIxJVucYKcjFjfvj60L57jrZpYCHC3XN0WCQ3sNYL4Gmvv+7GPvTAjc+KSdeNuE8oWQ==}
engines: {node: '>=12.22.0'}
ipx@3.1.1:
resolution: {integrity: sha512-7Xnt54Dco7uYkfdAw0r2vCly3z0rSaVhEXMzPvl3FndsTVm5p26j+PO+gyinkYmcsEUvX2Rh7OGK7KzYWRu6BA==}
hasBin: true
iron-webcrypto@1.2.1:
resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
@@ -6445,6 +6462,11 @@ packages:
resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
engines: {node: '>=12'}
xss@1.0.15:
resolution: {integrity: sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==}
engines: {node: '>= 0.10.0'}
hasBin: true
y-protocols@1.0.7:
resolution: {integrity: sha512-YSVsLoXxO67J6eE/nV4AtFtT3QEotZf5sK5BHxFBXso7VDUT3Tx07IfA6hsu5Q5OmBdMkQVmFZ9QOA7fikWvnw==}
engines: {node: '>=16.0.0', npm: '>=8.0.0'}
@@ -7139,6 +7161,9 @@ snapshots:
'@eslint/core': 0.17.0
levn: 0.4.1
'@fastify/accept-negotiator@2.0.1':
optional: true
'@fastify/busboy@3.2.0': {}
'@fingerprintjs/botd@2.0.0': {}
@@ -7898,6 +7923,42 @@ snapshots:
- vite
- vue
'@nuxt/image@2.0.0(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)':
dependencies:
'@nuxt/kit': 4.3.0(magicast@0.5.1)
consola: 3.4.2
defu: 6.1.4
h3: 1.15.5
image-meta: 0.2.2
knitwork: 1.3.0
ohash: 2.0.11
pathe: 2.0.3
std-env: 3.10.0
ufo: 1.6.3
optionalDependencies:
ipx: 3.1.1(db0@0.3.4)(ioredis@5.9.2)
transitivePeerDependencies:
- '@azure/app-configuration'
- '@azure/cosmos'
- '@azure/data-tables'
- '@azure/identity'
- '@azure/keyvault-secrets'
- '@azure/storage-blob'
- '@capacitor/preferences'
- '@deno/kv'
- '@netlify/blobs'
- '@planetscale/database'
- '@upstash/redis'
- '@vercel/blob'
- '@vercel/functions'
- '@vercel/kv'
- aws4fetch
- db0
- idb-keyval
- ioredis
- magicast
- uploadthing
'@nuxt/kit@3.21.0(magicast@0.5.1)':
dependencies:
c12: 3.3.3(magicast@0.5.1)
@@ -10131,6 +10192,9 @@ snapshots:
cssesc@3.0.0: {}
cssfilter@0.0.10:
optional: true
cssnano-preset-default@7.0.10(postcss@8.5.6):
dependencies:
browserslist: 4.28.1
@@ -11064,6 +11128,46 @@ snapshots:
transitivePeerDependencies:
- supports-color
ipx@3.1.1(db0@0.3.4)(ioredis@5.9.2):
dependencies:
'@fastify/accept-negotiator': 2.0.1
citty: 0.1.6
consola: 3.4.2
defu: 6.1.4
destr: 2.0.5
etag: 1.8.1
h3: 1.15.5
image-meta: 0.2.2
listhen: 1.9.0
ofetch: 1.5.1
pathe: 2.0.3
sharp: 0.34.5
svgo: 4.0.0
ufo: 1.6.3
unstorage: 1.17.4(db0@0.3.4)(ioredis@5.9.2)
xss: 1.0.15
transitivePeerDependencies:
- '@azure/app-configuration'
- '@azure/cosmos'
- '@azure/data-tables'
- '@azure/identity'
- '@azure/keyvault-secrets'
- '@azure/storage-blob'
- '@capacitor/preferences'
- '@deno/kv'
- '@netlify/blobs'
- '@planetscale/database'
- '@upstash/redis'
- '@vercel/blob'
- '@vercel/functions'
- '@vercel/kv'
- aws4fetch
- db0
- idb-keyval
- ioredis
- uploadthing
optional: true
iron-webcrypto@1.2.1: {}
is-absolute@1.0.0:
@@ -13583,6 +13687,12 @@ snapshots:
xml-name-validator@4.0.0: {}
xss@1.0.15:
dependencies:
commander: 2.20.3
cssfilter: 0.0.10
optional: true
y-protocols@1.0.7(yjs@13.6.29):
dependencies:
lib0: 0.2.117