feat: Issue #3336148: Add support for forms

playground/components/global/DrupalForm.vue

@@ -0,0 +1,18 @@
+<template>
+  <form vue-enabled :formId="formId" :method="method" v-bind="attributes" :action="target">
+    <slot><div v-html="content" /></slot>
+    <input type="hidden" name="target_url" :value="target">
+  </form>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  formId: String,
+  attributes: Object,
+  method: String,
+  content?: String,
+}>()
+
+const match = props.content ? props.content.match(/action="([^"]*)"/) : null
+const target = match ? match[1] : useRoute().path
+</script>

src/module.ts

@@ -59,7 +59,7 @@ export default defineNuxtModule<ModuleOptions>({
     const { resolve } = createResolver(import.meta.url)
     const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
     nuxt.options.build.transpile.push(runtimeDir)
-    addPlugin(resolve(runtimeDir, 'plugin'))
+    addPlugin(resolve(runtimeDir, 'plugins/formHandler'))
     if (options.serverLogLevel) {
       addServerPlugin(resolve(runtimeDir, 'server/plugins/errorLogger'))
     }

src/runtime/composables/useDrupalCe/index.ts

@@ -4,7 +4,7 @@ import { appendResponseHeader } from 'h3'
 import type { UseFetchOptions } from '#app'
 import type { $Fetch, NitroFetchRequest } from 'nitropack'
 import { getDrupalBaseUrl, getMenuBaseUrl } from './server'
-import { useRuntimeConfig, useState, useFetch, navigateTo, createError, h, resolveComponent, setResponseStatus, useNuxtApp, useRequestHeaders, ref, watch } from '#imports'
+import { useRuntimeConfig, useState, useFetch, navigateTo, createError, h, resolveComponent, setResponseStatus, useNuxtApp, useRequestHeaders, ref, watch, useRequestEvent } from '#imports'
 
 export const useDrupalCe = () => {
   const config = useRuntimeConfig().public.drupalCe
@@ -116,9 +116,28 @@ export const useDrupalCe = () => {
       page_layout: 'default',
       title: '',
     }))
+    const serverResponse = useState('server-response', () => null)
     useFetchOptions.key = `page-${path}`
+    const page = ref(null)
+    const pageError = ref(null)
 
-    const { data: page, error } = await useCeApi(path, useFetchOptions, true)
+    if (import.meta.server) {
+      serverResponse.value = useRequestEvent(nuxtApp).context.nitro.response
+    }
+
+    // Check if the page data is already provided, e.g. by a form response.
+    if (serverResponse.value && serverResponse.value._data) {
+      page.value = serverResponse.value._data
+      passThroughHeaders(nuxtApp, serverResponse.value.headers)
+    } else {
+      const { data, error } = await useCeApi(path, useFetchOptions, true)
+      page.value = data.value
+      pageError.value = error.value
+    }
+
+    if (page.value?.messages) {
+      pushMessagesToState(page.value.messages)
+    }
 
     if (page?.value?.redirect) {
       await callWithNuxt(nuxtApp, navigateTo, [
@@ -128,13 +147,11 @@ export const useDrupalCe = () => {
       return pageState
     }
 
-    if (error.value) {
-      overrideErrorHandler ? overrideErrorHandler(error) : pageErrorHandler(error, { config, nuxtApp })
-      page.value = error.value?.data
+    if (pageError.value) {
+      overrideErrorHandler ? overrideErrorHandler(pageError) : pageErrorHandler(pageError, { config, nuxtApp })
+      page.value = pageError.value?.data
     }
 
-    page.value?.messages && pushMessagesToState(page.value.messages)
-
     pageState.value = page
     return page
   }

src/runtime/plugins/formHandler.ts

@@ -0,0 +1,37 @@
+import { readFormData } from 'h3'
+import { getDrupalBaseUrl } from '../composables/useDrupalCe/server.js'
+import { defineNuxtPlugin, addRouteMiddleware, useRuntimeConfig, useRequestEvent } from '#imports'
+
+export default defineNuxtPlugin(() => {
+  const runtimeConfig = useRuntimeConfig()
+  const { ceApiEndpoint } = runtimeConfig.public.drupalCe
+  const drupalBaseUrl = getDrupalBaseUrl()
+
+  addRouteMiddleware('form-handler', async () => {
+    if (import.meta.server) {
+      const event = useRequestEvent()
+      if (event && event.node.req.method === 'POST') {
+        const formData = await readFormData(event)
+
+        if (formData && formData.get('target_url')) {
+          const targetUrl = formData.get('target_url')
+          const response = await $fetch.raw(drupalBaseUrl + ceApiEndpoint + targetUrl, {
+            method: 'POST',
+            body: formData,
+          })
+
+          event.context.nitro.response = {
+            _data: response._data,
+            headers: Object.fromEntries(response.headers.entries()),
+          }
+        } else {
+          throw createError({
+            statusCode: 400,
+            statusMessage: 'Bad Request',
+            message: 'The request contains invalid form data or no form data at all.',
+          })
+        }
+      }
+    }
+  }, { global: true })
+})