@iqual/nuxt-icms 1.6.1 → 1.6.2-rc.2

package/modules/dynamicParagraphResolver.ts

@@ -18,6 +18,7 @@
  *   icms: {
  *     components: {
  *       fragments: ['paragraphIcmsLayoutText', 'paragraphIcmsLayoutImage'],
+ *       wrapperFragments: ['paragraphFromLibrary'],
  *       teaserFragments: ['paragraphIcmsEventOccurrence'],
  *       searchResultFragments: ['paragraphIcmsEventOccurrence']
  *     }
@@ -32,6 +33,9 @@
  *
  * Each layer can define:
  * - `fragments`: Full paragraph fragments (e.g., 'paragraphIcmsLayoutText')
+ * - `wrapperFragments`: Fragments of paragraphs embedding another paragraph
+ *   (e.g., 'paragraphFromLibrary'); spread into `paragraph` but not into
+ *   `paragraphInLibrary`, the fragment the embedded paragraph uses
  * - `teaserFragments`: Teaser variant fragments (e.g., 'paragraphIcmsEventOccurrence')
  * - `searchResultFragments`: Search result variant fragments
  *
@@ -40,6 +44,7 @@
  * the fragments available in GraphQL queries throughout the application.
  */
 import { defineNuxtModule } from 'nuxt/kit'
+import type { IcmsLayerConfig } from '../types/layerConfig'
 
 /**
  * Module definition for the dynamicParagraphResolver
@@ -51,9 +56,24 @@ export default defineNuxtModule({
     name: 'dynamicParagraphResolver',
   },
   setup(_options, nuxt) {
+    const layerConfigs: IcmsLayerConfig[] = nuxt.options._layers
+      .map((layer) => layer.config?.icms)
+      .filter((config): config is IcmsLayerConfig => !!config)
+
     // Collect all paragraph fragments from the Nuxt layers.
-    const paragraphFragments = nuxt.options._layers
-      .map(layer => layer.config?.icms?.components?.fragments)
+    const paragraphFragments = layerConfigs
+      .map((config) => config.components?.fragments)
+      .filter(Boolean)
+      .flat()
+      .map((fragmentName) => {
+        return `...${fragmentName}`
+      })
+
+    // Wrapper paragraphs (from_library) embed another paragraph. They belong
+    // in `paragraph` but not in the fragment the embedded paragraph uses:
+    // a fragment spreading itself is a GraphQL validation error.
+    const wrapperFragments = layerConfigs
+      .map((config) => config.components?.wrapperFragments)
       .filter(Boolean)
       .flat()
       .map((fragmentName) => {
@@ -62,6 +82,14 @@ export default defineNuxtModule({
 
     const fragment = `
 fragment paragraph on Paragraph {
+  id
+  parentId
+  ${[...paragraphFragments, ...wrapperFragments].join('\n  ')}
+}
+    `
+
+    const inLibraryFragment = `
+fragment paragraphInLibrary on Paragraph {
   id
   parentId
   ${paragraphFragments.join('\n  ')}
@@ -69,8 +97,8 @@ fragment paragraph on Paragraph {
     `
 
     // Collect teaser fragments from all layers
-    const paragraphTeaserFragments = nuxt.options._layers
-      .map(layer => layer.config?.icms?.components?.teaserFragments)
+    const paragraphTeaserFragments = layerConfigs
+      .map((config) => config.components?.teaserFragments)
       .filter(Boolean)
       .flat()
       .filter((fragmentName) => typeof fragmentName === 'string')
@@ -83,8 +111,8 @@ fragment paragraphTeaser on Paragraph {
     `
 
     // Collect search result fragments from all layers
-    const paragraphSearchResultFragments = nuxt.options._layers
-      .map(layer => layer.config?.icms?.components?.searchResultFragments)
+    const paragraphSearchResultFragments = layerConfigs
+      .map((config) => config.components?.searchResultFragments)
       .filter(Boolean)
       .flat()
       .filter((fragmentName) => typeof fragmentName === 'string')
@@ -98,8 +126,15 @@ fragment paragraphSearchResult on Paragraph {
 
     nuxt.hooks.hookOnce('nuxt-graphql-middleware:init', (context) => {
       context.addDocument('fragment.paragraph.graphql', fragment)
+      context.addDocument(
+        'fragment.paragraphInLibrary.graphql',
+        inLibraryFragment,
+      )
       context.addDocument('fragment.paragraphTeaser.graphql', teaserFragment)
-      context.addDocument('fragment.paragraphSearchResult.graphql', searchResultFragment)
+      context.addDocument(
+        'fragment.paragraphSearchResult.graphql',
+        searchResultFragment,
+      )
     })
-  }
+  },
 })

package/modules/pageCache.ts

@@ -0,0 +1,106 @@
+/**
+ * Ships the ICMS multi-cache server options with the layer (ICMS-268).
+ *
+ * nuxt-multi-cache only looks for `multiCache.serverOptions.ts` in the app's
+ * own `server/` directory, never in a layer. It imports that file from the
+ * generated `#nuxt-multi-cache/server-options` template. When the app has no
+ * file of its own, this module replaces that template with one importing
+ * `cache/multiCache.serverOptions.ts` of this package — Nuxt's addTemplate()
+ * replaces a template with the same file name.
+ *
+ * A project that needs different server options keeps its own
+ * `server/multiCache.serverOptions.ts`; it then wins, as before.
+ *
+ * Like nuxt-multi-cache does for the app's file, the server options are
+ * replaced with an empty stub in the client build, which would otherwise
+ * bundle server-only code. The Vue app's SSR build gets only the ICMS
+ * `enabledForRequest`, the one option nuxt-multi-cache's app-side helpers
+ * need, with or without a project file: the full options import
+ * nitropack/runtime, which only resolves in Nitro's bundle — the Vite dev
+ * server can't load it. Nitro always uses the full options.
+ */
+import { existsSync } from 'node:fs'
+import { join } from 'node:path'
+import {
+  addTemplate,
+  addVitePlugin,
+  createResolver,
+  defineNuxtModule,
+  useLogger,
+} from 'nuxt/kit'
+
+const TEMPLATE = 'nuxt-multi-cache/server-options.js'
+const EXTENSIONS = ['.ts', '.mts', '.js', '.mjs']
+
+export default defineNuxtModule({
+  meta: { name: 'icmsPageCache' },
+  setup(_options, nuxt) {
+    const logger = useLogger('icms')
+
+    const resolver = createResolver(import.meta.url)
+    addVitePlugin(
+      {
+        name: 'icms-page-cache:app-ssr',
+        enforce: 'pre',
+        transform(_code: string, id: string) {
+          // Also with a project file: it typically extends the ICMS options.
+          // Templates are virtual modules (virtual:nuxt:.nuxt%2F…).
+          const path = decodeURIComponent(id.split('?')[0]!)
+          if (path.endsWith('/' + TEMPLATE)) {
+            return [
+              `import { enabledForRequest } from ${JSON.stringify(resolver.resolve('../cache/enabledForRequest'))}`,
+              'export const serverOptions = { enabledForRequest }',
+            ].join('\n')
+          }
+        },
+      },
+      { client: false },
+    )
+
+    const appServerOptions = EXTENSIONS.map((extension) =>
+      join(nuxt.options.serverDir, 'multiCache.serverOptions' + extension),
+    ).find((path) => existsSync(path))
+    if (appServerOptions) {
+      return
+    }
+
+    addVitePlugin(
+      {
+        name: 'icms-page-cache:server-only',
+        enforce: 'pre',
+        transform(_code: string, id: string) {
+          if (id.includes('nuxt-icms/cache/multiCache.serverOptions')) {
+            return 'export default function () { return {} }'
+          }
+        },
+      },
+      { server: false },
+    )
+
+    nuxt.hook('modules:done', () => {
+      const hasTemplate = nuxt.options.build.templates.some(
+        (template) => template.filename === TEMPLATE,
+      )
+      if (!hasTemplate) {
+        // Fail-safe: server/plugins/pageCache.ts disables the page cache
+        // when the server options have no bounded route storage.
+        logger.error(
+          `nuxt-multi-cache no longer generates "${TEMPLATE}"; the ICMS ` +
+            'page cache stays disabled. See modules/pageCache.ts.',
+        )
+        return
+      }
+
+      addTemplate({
+        filename: TEMPLATE,
+        write: true,
+        getContents: () =>
+          [
+            "import serverOptionsFactory from '@iqual/nuxt-icms/cache/multiCache.serverOptions'",
+            'const serverOptions = serverOptionsFactory()',
+            'export { serverOptions }',
+          ].join('\n'),
+      })
+    })
+  },
+})

package/nuxt.config.ts

@@ -1,4 +1,4 @@
-import { resolve } from 'node:path'
+import { resolve, dirname, join } from 'node:path'
 
 import easyTexts from './config/easyTexts'
 import blokkli from './config/blokkli'
@@ -14,17 +14,10 @@ import vuepal from './config/vuepal'
 import { breakpoints } from './config/breakpoints'
 
 import { fileURLToPath } from 'node:url'
-import { dirname, join } from 'node:path'
 
-
-
-const ONE_YEAR = 31_536_000
-const ONE_MONTH = 2_592_000
 const IS_DEV = process.env.NODE_ENV === 'development'
-const NUXT_REQUEST_HOST = process.env.NUXT_REQUEST_HOST
-const NUXT_IMAGE_CLOUDFLARE_BASE_URL = process.env.NUXT_IMAGE_CLOUDFLARE_BASE_URL ?? 'https://iqual.cloud'
-
-
+const NUXT_IMAGE_CLOUDFLARE_BASE_URL =
+  process.env.NUXT_IMAGE_CLOUDFLARE_BASE_URL ?? 'https://iqual.cloud'
 
 const currentDir = dirname(fileURLToPath(import.meta.url))
 
@@ -60,15 +53,6 @@ export default defineNuxtConfig({
       htmlAttrs: {
         tagDuplicateStrategy: 'merge',
       },
-      link: [
-        { rel: 'shortcut icon', type: 'image/x-icon', href: '/favicon/favicon.ico' },
-        { rel: 'apple-touch-icon', href: '/favicon/favicon/apple-touch-icon.png' },
-        { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon/favicon-96x96.png' },
-        { rel: 'icon', type: 'image/svg+xml', href: '/favicon/favicon.svg' },
-        { rel: 'manifest', href: '/favicon/site.webmanifest' },
-        { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/favicon/web-app-manifest-192x192.png' },
-        { rel: 'icon', type: 'image/png', sizes: '512x512', href: '/favicon/web-app-manifest-512x512.png' }
-      ],
     },
   },
 
@@ -76,9 +60,7 @@ export default defineNuxtConfig({
    * Site-wide CSS (PostCSS compiled if within ~/assets)
    * @see https://nuxt.com/docs/getting-started/styling
    */
-  css: [
-    join(currentDir, './assets/css/fe-fixes.css'),
-  ],
+  css: [join(currentDir, './assets/css/fe-fixes.css')],
 
   /**
    * Nuxt.js modules
@@ -90,9 +72,14 @@ export default defineNuxtConfig({
     'nuxt-easy-texts',
     'nuxt-page-dependencies',
     'nuxt-multi-cache',
+    // Ships the ICMS multi-cache server options; see modules/pageCache.ts.
+    '@iqual/nuxt-icms/modules/pageCache',
     'vuepal',
     'nuxt-language-negotiation',
     'nuxt-svg-icon-sprite',
+    // Registers the `blokkli:alter-features` hook, which @blokkli/editor runs
+    // during its own setup — so it has to be in place before that module.
+    '@iqual/nuxt-icms/modules/blokkliFragments',
     '@blokkli/editor',
     'nuxt-viewport',
     ...(IS_DEV ? ['@nuxt/eslint'] : []),
@@ -100,13 +87,25 @@ export default defineNuxtConfig({
     '@iqual/nuxt-icms/modules/dynamicParagraphResolver',
     '@iqual/nuxt-icms/modules/dynamicEntityComponentResolver',
     'nuxt-maplibre',
+    '@nuxtjs/turnstile',
   ],
 
   image: {
+    // Pin the @nuxt/image v1 default screens: v2 dropped `xs` and `xxl`, and
+    // useImageSources() derives every srcset from these keys.
+    screens: {
+      xs: 320,
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      xxl: 1536,
+      '2xl': 1536,
+    },
     provider: 'cloudflare',
     cloudflare: {
-      baseURL: NUXT_IMAGE_CLOUDFLARE_BASE_URL
-    }
+      baseURL: NUXT_IMAGE_CLOUDFLARE_BASE_URL,
+    },
   },
 
   pageDependencies: {
@@ -114,7 +113,7 @@ export default defineNuxtConfig({
   },
 
   $meta: {
-    name: 'icms'
+    name: 'icms',
   },
 
   icms: {
@@ -125,6 +124,7 @@ export default defineNuxtConfig({
         'paragraphIcmsLayoutText',
         'paragraphIcmsLayoutTextMedia',
         'paragraphIcmsLayoutTeasers',
+        'paragraphIcmsLayoutListing',
         'paragraphIcmsLayoutHeroImage',
         'paragraphIcmsLayoutCallToAction',
         'paragraphIcmsLayoutCards',
@@ -141,11 +141,12 @@ export default defineNuxtConfig({
         'paragraphIcmsLayoutPartnerships',
         'paragraphIcmsLayoutDownloads',
         'paragraphIcmsLayoutMedia',
-        'paragraphIcmsLayoutDownloads',
         'paragraphIcmsLayoutIframe',
         'paragraphIcmsLayoutTimeline',
         'paragraphIcmsLayoutLinkLists',
         'paragraphIcmsLayoutCollapsible',
+        'paragraphIcmsLayoutAnchor',
+        'paragraphIcmsLayoutAnchorNavigation',
         // Element components
         'paragraphIcmsButtonElement',
         'paragraphIcmsCardElement',
@@ -159,8 +160,15 @@ export default defineNuxtConfig({
         'paragraphIcmsTimelineElement',
         'paragraphIcmsLinkListElement',
         'paragraphIcmsCollapsibleElement',
-      ]
+        // Placeholder for frontend-defined fragments (defineBlokkliFragment)
+        'paragraphBlokkliFragment',
+      ],
+      // Reusable blocks from the paragraph library
+      wrapperFragments: ['paragraphFromLibrary'],
     },
+    // Blökkli fragments (components/Blokkli/Fragment/*) are discovered and
+    // offered to editors automatically; a project switches the feature off
+    // with `blokkliFragments: false`. See modules/blokkliFragments.ts.
   },
 
   sourcemap: IS_DEV,
@@ -168,7 +176,7 @@ export default defineNuxtConfig({
   hooks: {
     'vite:extend'({ config }) {
       if (config.server && config.server.hmr) {
-        // @ts-ignore
+        // @ts-expect-error `hmr` narrows to `true | HmrOptions`.
         config.server.hmr.protocol = 'wss'
       }
     },
@@ -184,9 +192,12 @@ export default defineNuxtConfig({
       sourcemap: false,
       minify: 'esbuild',
     },
-    esbuild: {
-      keepNames: true,
-    },
+    // Never enable esbuild's `keepNames` here: it wraps every function in a
+    // `__name()` helper that is defined once per chunk, and MapLibre builds its
+    // web worker by stringifying functions into a blob. The serialised source
+    // then calls a helper that does not exist in the worker, the worker dies on
+    // its first statement, and every map renders as an empty background with no
+    // tiles and no error (ICMS-642). It breaks production builds only.
     css: {
       devSourcemap: true,
     },
@@ -238,8 +249,26 @@ export default defineNuxtConfig({
   },
 
   maplibre: {
-    css: false
+    css: false,
+  },
+
+  /**
+   * Cloudflare Turnstile — spam protection for decoupled webforms.
+   *
+   * Both keys default to an empty string, which disables the check end to end:
+   * no widget is rendered and the server middleware lets submissions through.
+   * A project turns it on by setting NUXT_PUBLIC_TURNSTILE_SITE_KEY and
+   * NUXT_TURNSTILE_SECRET_KEY, which also override the values at runtime
+   * because the module maps them onto runtimeConfig.
+   *
+   * The empty strings are deliberate: without them the module falls back to
+   * Cloudflare's "always passes" test keys in development, which loads the
+   * Turnstile script on every local page that carries a form.
+   */
+  turnstile: {
+    siteKey: process.env.NUXT_PUBLIC_TURNSTILE_SITE_KEY || '',
+    secretKey: process.env.NUXT_TURNSTILE_SECRET_KEY || '',
   },
 
   compatibilityDate: '2024-08-14',
-})
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.6.1",
+  "version": "1.6.2-rc.2",
   "description": "ICMS Base",
   "type": "module",
   "private": false,
@@ -13,54 +13,55 @@
   },
   "dependencies": {
     "@blokkli/editor": "2.0.0-alpha.13",
-    "@elastic/elasticsearch": "~8.19.1",
+    "@elastic/elasticsearch": "~8.19.2",
     "@iframe-resizer/child": "~5.5.9",
     "@iframe-resizer/vue": "~5.5.9",
-    "@nuxt/image": "~1.11.0",
-    "@nuxt/kit": "~4.4.8",
+    "@nuxt/image": "~2.2.0",
+    "@nuxt/kit": "~4.6.2",
     "@nuxt/scripts": "~0.11.13",
-    "@nuxt/schema": "~4.4.8",
-    "@nuxt/ui": "~4.7.1",
+    "@nuxt/schema": "~4.6.2",
+    "@nuxt/ui": "~4.12.0",
     "@nuxtjs/color-mode": "~3.5.2",
     "@nuxtjs/turnstile": "1.0.0",
     "@vueuse/core": "~12.8.2",
-    "caniuse-lite": "~1.0.30001806",
+    "caniuse-lite": "~1.0.30001817",
     "clsx": "~2.1.1",
     "culori": "~4.0.2",
     "h3": "~1.15.11",
     "lucide-vue-next": "~0.469.0",
-    "nitropack": "~2.13.4",
-    "nuxt": "~4.4.8",
-    "nuxt-easy-texts": "~2.1.2",
+    "nitropack": "~2.13.5",
+    "nuxt": "~4.6.2",
+    "nuxt-easy-texts": "~2.2.0",
     "nuxt-graphql-middleware": "5.4.0",
     "nuxt-language-negotiation": "~2.0.2",
     "nuxt-maplibre": "~1.2.2",
     "nuxt-multi-cache": "~4.0.3",
     "nuxt-page-dependencies": "~1.2.0",
     "nuxt-svg-icon-sprite": "~2.0.2",
-    "nuxt-viewport": "~2.3.1",
+    "nuxt-viewport": "~2.6.1",
     "ofetch": "~1.5.1",
     "patch-package": "~8.0.1",
-    "svgo": "~3.3.2",
+    "svgo": "~3.3.5",
     "swiper": "~10.3.1",
-    "tailwind-merge": "~2.6.1",
-    "tailwind-variants": "~0.3.1",
+    "tailwind-merge": "~3.7.0",
+    "tailwind-variants": "~3.3.1",
     "tailwind-animate": "~0.2.10",
+    "typescript": "~5.9.3",
     "ufo": "~1.6.4",
-    "unstorage": "~1.17.5",
-    "vite": "~7.3.6",
-    "vue": "~3.5.41",
+    "unstorage": "~1.17.6",
+    "vite": "~7.3.7",
+    "vue": "~3.5.44",
     "vue3-carousel": "0.3.1",
     "vue3-click-away": "~1.2.4",
-    "vuepal": "~3.0.5",
-    "zod": "~4.4.3"
+    "vuepal": "~3.0.6",
+    "zod": "~4.6.7"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.2.4",
+    "@tailwindcss/postcss": "^4.3.3",
     "@types/iframe-resizer": "^4.0.0",
     "postcss-cli": "^11.0.1",
     "postcss-hexrgba": "github:thormeier/postcss-hexrgba",
-    "postcss-nesting": "^14.0.0",
-    "sass": "^1.89.0"
+    "postcss-nesting": "^14.0.3",
+    "sass": "^1.106.0"
   }
 }

package/pages/[...slug]/index.vue

@@ -2,11 +2,9 @@
   <div>
     <component :is="entityComponent" v-bind="entity" />
   </div>
-  
 </template>
 
 <script lang="ts" setup>
-
 const { get } = useEntityRegistry()
 
 const entityComponent = computed(() => get(entity.value?.__typename))
@@ -20,7 +18,30 @@ definePageMeta({
   path: '/:slug(.*)*',
 })
 
-const { entity } = await useDrupalRouteQuery('slug')
+usePageCache()
+
+const { entity, drupalRoute } = await useDrupalRouteQuery('slug', {
+  noError: true,
+})
+
+if (!entity.value) {
+  // A Drupal route without an entity to render (admin, user, forms) is a
+  // backend page. Links to such paths are router links, so a click reaches
+  // this page instead of the router in front of the frontend: hand over to
+  // the backend domain rather than showing a 404.
+  if (drupalRoute.value.name) {
+    await navigateTo(useDrupalUrl()(useRoute().fullPath), {
+      external: true,
+      redirectCode: 302,
+    })
+  } else {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Page not found',
+      fatal: true,
+    })
+  }
+}
 
 await renderPageDependencies()
-</script>
+</script>

package/pages/index.vue

@@ -2,11 +2,9 @@
   <div>
     <component :is="entityComponent" v-bind="entity" />
   </div>
-  
 </template>
 
 <script lang="ts" setup>
-
 const { get } = useEntityRegistry()
 
 const entityComponent = computed(() => get(entity.value?.__typename))
@@ -20,7 +18,9 @@ definePageMeta({
   hideBreadcrumb: true,
 })
 
+usePageCache()
+
 const { entity } = await useDrupalRouteQuery('slug')
 
 await renderPageDependencies()
-</script>
+</script>

package/pages/node/[nid]/index.vue

@@ -1,9 +1,8 @@
 <template>
-  <component :is="entityComponent" v-bind="node"/>
+  <component :is="entityComponent" v-bind="node" />
 </template>
 
 <script lang="ts" setup>
-
 defineOptions({
   name: 'PageNodeCanonical',
 })
@@ -17,4 +16,4 @@ const { entity: node } = await useDrupalRouteQuery('nodeCanonical')
 const entityComponent = computed(() => get(node.value?.__typename))
 
 await renderPageDependencies()
-</script>
+</script>

package/patches/@blokkli+editor+2.0.0-alpha.13.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/@blokkli/editor/dist/module.mjs b/node_modules/@blokkli/editor/dist/module.mjs
-index 0ff0d3b..5329e9f 100644
+index 0ff0d3b..2dee9c3 100644
 --- a/node_modules/@blokkli/editor/dist/module.mjs
 +++ b/node_modules/@blokkli/editor/dist/module.mjs
 @@ -271,16 +271,31 @@ class CollectedBlockFile extends CollectedFile {
@@ -162,3 +162,17 @@ index 0ff0d3b..5329e9f 100644
      await Promise.all(allFiles.map((filePath) => this.addFile(filePath)));
    }
    runHooks() {
+@@ -7417,6 +7531,13 @@ const runtimeOptions = defineCodeTemplate(
+       item.variations.forEach((variation) => {
+         if (hasOptions) {
+           OPTIONS.set(variation, item.varName);
++          // Fragments: defineBlokkli() looks up their options as
++          // `fragment:<name>__default`, while getVariations() only yields
++          // `fragment:<name>`. Without the suffixed alias the lookup misses
++          // and a fragment never receives its (global) options.
++          if (!isBlock(item.definition)) {
++            OPTIONS.set(variation + "__default", item.varName);
++          }
+         }
+       });
+       if (isBlock(item.definition)) {

package/plugins/currentNode.ts

@@ -0,0 +1,17 @@
+/**
+ * Tracks the node ID of the currently viewed Drupal route so components
+ * deep in the tree (e.g. faceted listings) can reference it without each
+ * node component having to provide it.
+ */
+export default defineNuxtPlugin({
+  name: 'starterkit:current-node',
+  setup(app) {
+    const currentNodeId = useCurrentNodeId()
+    app.hooks.hook('vuepal:drupal-route', (data) => {
+      currentNodeId.value =
+        data.drupalRoute?.entityType === 'node' && data.drupalRoute.entityId
+          ? String(data.drupalRoute.entityId)
+          : null
+    })
+  },
+})

package/plugins/graphqlMiddleware.ts

@@ -44,7 +44,15 @@ export default defineNuxtPlugin({
     }
 
     if (import.meta.server && event) {
-      state.fetchOptions.headers = buildProxyRequestHeaders(event)
+      const headers = buildProxyRequestHeaders(event)
+      // The internal request to the GraphQL server route has no Host header of
+      // its own; pass on the public host, from which the route derives the
+      // forwarded host for Drupal (see server/utils/backendRequestHeaders.ts).
+      const host = event.node.req.headers.host
+      if (host) {
+        headers.host = host
+      }
+      state.fetchOptions.headers = headers
     }
 
     state.fetchOptions.onResponse = (result) => {
@@ -71,4 +79,4 @@ export default defineNuxtPlugin({
       }
     }
   },
-})
+})

package/plugins/initData.ts

@@ -1,4 +1,3 @@
-
 import type {
   GlobalConfigFragment,
   InitDataQuery,
@@ -79,11 +78,20 @@ export default defineNuxtPlugin({
       if (!event) {
         throw new Error('Missing request event.')
       }
-      const { value: cachedResponse, addToCache } =
-        await useDataCache<InitDataResponse>(
-          'initData_' + language.value,
-          event,
-        )
+      const {
+        value: cachedResponse,
+        addToCache,
+        cacheTags,
+      } = await useDataCache<InitDataResponse>(
+        'initData_' + language.value,
+        event,
+      )
+      // A cached response skips the GraphQL request, so pass its tags on to
+      // the page in the route cache (only the tags: bubbling the whole cache
+      // item would make the page as permanent as the init data).
+      if (cachedResponse) {
+        useRouteCache((route) => route.addTags(cacheTags))
+      }
       const response = cachedResponse || (await useGraphqlQuery('initData'))
       data.value = mapInitData(response)
       if (!cachedResponse && response.extensions.cacheability?.isCacheable) {
@@ -105,4 +113,4 @@ export default defineNuxtPlugin({
       watch(language, loadInitData)
     }
   },
-})
+})