@wpnuxt/core 1.0.0-edge.10

package/README.md

@@ -0,0 +1,80 @@
+
+This module is still being developed and not ready for production usage yet.
+There will be many smaller alpha releases the coming weeks, often with breaking changes.
+
+I am working towards a stable release. And will inform about it here
+
+# WPNuxt
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+Nuxt module for using WordPress as a headless CMS with a Nuxt 3 frontend
+
+- [✨  Release Notes](/CHANGELOG.md)
+- [🏀 Online playground](https://stackblitz.com/github/wpnuxt/wpnuxt-core?file=playground%2Fapp%2Fpages%2Findex.vue)
+- [📖  Documentation](https://wpnuxt.com)
+
+## Features
+
+- Content is fetched from WordPress using server-side GraphQL api calls
+- Support for (Gutenberg Blocks) by adding the separate [@wpnuxt/blocks](https://github.com/wpnuxt/wpnuxt-blocks), which uses WPEngine's [wp-graphql-content-blocks](https://faustjs.org/tutorial/get-started-with-wp-graphql-content-blocks) and a set of custom vue components
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add @wpnuxt/core
+```
+
+And connect WPNuxt to your wordpress installation in your nuxt.config.ts:
+
+```json
+wpNuxt: {
+    wordpressUrl: 'https://yourwordpress.domain.com'
+},
+```
+
+That's it! You can now use the WPNuxt module in your Nuxt app ✨
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Generate type stubs
+pnpm run dev:prepare
+
+# Develop with the playground
+pnpm run dev
+
+# Build the playground
+pnpm run dev:build
+
+# Run ESLint
+pnpm run lint
+
+# Run Vitest
+pnpm run test
+pnpm run test:watch
+
+# Release new version
+pnpm run release
+```
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@vernaillen/wpnuxt/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://www.npmjs.com/package/@vernaillen/wpnuxt
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/@vernaillen/wpnuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://www.npmjs.com/package/@vernaillen/wpnuxt
+
+[license-src]: https://img.shields.io/npm/l/@vernaillen/wpnuxt?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://www.npmjs.com/package/@vernaillen/wpnuxt
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,89 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface WPNuxtConfig {
+
+  /**
+   * Log level for the WPNuxt module
+   * @default 3
+   * @example 0 = silent, 1 = error, 2 = warn, 3 = info, 4 = debug, 5 = trace
+   */
+  logLevel?: number
+  /**
+   * URL of the WordPress site
+   *
+   * There is no default value for this option, so it's required.
+   *
+   * @example 'https://wordpress.wpnuxt.com'
+   */
+  wordpressUrl: string
+  frontendUrl: string
+
+  defaultMenuName?: string
+
+  enableCache?: boolean
+
+  staging?: boolean
+
+  /**
+   * @default 'useWP'
+   */
+  composablesPrefix: string
+
+  queries?: WPNuxtConfigQueries
+
+  /**
+   * Download the GraphQL schema and store it on disk.
+   *
+   * When setting this to false, the module will expect a graphql.schema file to be available.
+   * You could first enable this, commit the schema file and then set downloadSchema to false to avoid have to query the graphql introspection on each start of the application
+   *
+   * @default true
+   */
+  downloadSchema?: boolean
+}
+
+interface WPNuxtConfigQueries {
+
+  /**
+   * Folder for user defined queries
+   *
+   * relative to the src dir of your nuxt app
+   *
+   * @default extend/queries
+   */
+  extendDir?: string
+
+  /**
+   * The predefined queries & the user defined queries will be merged and placed in the queries output folder
+   *
+   * relative to the src dir of your nuxt app
+   *
+   * @default queries
+   */
+  outputDir?: string
+}
+
+declare const _default: _nuxt_schema.NuxtModule<WPNuxtConfig>;
+
+declare module '@nuxt/schema' {
+    interface RuntimeConfig {
+        wpNuxt: {
+            faustSecretKey: string;
+        };
+    }
+    interface PublicRuntimeConfig {
+        wpNuxt: WPNuxtConfig;
+    }
+    interface ConfigSchema {
+        wpNuxt: {
+            faustSecretKey: string;
+        };
+        runtimeConfig: {
+            public?: {
+                wpNuxt: WPNuxtConfig;
+            };
+        };
+    }
+}
+
+export { _default as default };

package/dist/module.d.ts

@@ -0,0 +1,89 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface WPNuxtConfig {
+
+  /**
+   * Log level for the WPNuxt module
+   * @default 3
+   * @example 0 = silent, 1 = error, 2 = warn, 3 = info, 4 = debug, 5 = trace
+   */
+  logLevel?: number
+  /**
+   * URL of the WordPress site
+   *
+   * There is no default value for this option, so it's required.
+   *
+   * @example 'https://wordpress.wpnuxt.com'
+   */
+  wordpressUrl: string
+  frontendUrl: string
+
+  defaultMenuName?: string
+
+  enableCache?: boolean
+
+  staging?: boolean
+
+  /**
+   * @default 'useWP'
+   */
+  composablesPrefix: string
+
+  queries?: WPNuxtConfigQueries
+
+  /**
+   * Download the GraphQL schema and store it on disk.
+   *
+   * When setting this to false, the module will expect a graphql.schema file to be available.
+   * You could first enable this, commit the schema file and then set downloadSchema to false to avoid have to query the graphql introspection on each start of the application
+   *
+   * @default true
+   */
+  downloadSchema?: boolean
+}
+
+interface WPNuxtConfigQueries {
+
+  /**
+   * Folder for user defined queries
+   *
+   * relative to the src dir of your nuxt app
+   *
+   * @default extend/queries
+   */
+  extendDir?: string
+
+  /**
+   * The predefined queries & the user defined queries will be merged and placed in the queries output folder
+   *
+   * relative to the src dir of your nuxt app
+   *
+   * @default queries
+   */
+  outputDir?: string
+}
+
+declare const _default: _nuxt_schema.NuxtModule<WPNuxtConfig>;
+
+declare module '@nuxt/schema' {
+    interface RuntimeConfig {
+        wpNuxt: {
+            faustSecretKey: string;
+        };
+    }
+    interface PublicRuntimeConfig {
+        wpNuxt: WPNuxtConfig;
+    }
+    interface ConfigSchema {
+        wpNuxt: {
+            faustSecretKey: string;
+        };
+        runtimeConfig: {
+            public?: {
+                wpNuxt: WPNuxtConfig;
+            };
+        };
+    }
+}
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,10 @@
+{
+  "name": "@wpnuxt/core",
+  "version": "1.0.0-edge.10",
+  "configKey": "wpNuxt",
+  "nuxt": ">=3.1.0",
+  "builder": {
+    "@nuxt/module-builder": "0.8.3",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,345 @@
+import { promises, statSync, existsSync, cpSync } from 'node:fs';
+import { resolveFiles, defineNuxtModule, createResolver, addPlugin, addImports, addComponentsDir, addServerHandler, installModule, hasNuxtModule, addTemplate, addTypeTemplate } from '@nuxt/kit';
+import { join } from 'pathe';
+import consola, { createConsola } from 'consola';
+import { ref } from 'vue';
+import { upperFirst } from 'scule';
+import { parse } from 'graphql';
+
+const name = "@wpnuxt/core";
+const version = "1.0.0-edge.10";
+
+const loggerRef = ref();
+const initLogger = (logLevel) => {
+  loggerRef.value = createConsola({
+    level: logLevel ? logLevel : 3,
+    formatOptions: {
+      colors: true,
+      compact: true,
+      date: true,
+      fancy: true
+    }
+  }).withTag("wpnuxt");
+  return loggerRef.value;
+};
+const getLogger = () => {
+  if (loggerRef.value) {
+    return loggerRef.value;
+  }
+};
+function validateConfig(options) {
+  if (!options.wordpressUrl || options.wordpressUrl.length === 0) {
+    throw new Error("WPNuxt error: WordPress url is missing");
+  } else if (options.wordpressUrl.substring(options.wordpressUrl.length - 1) === "/") {
+    throw new Error("WPNuxt error: WordPress url should not have a trailing slash: " + options.wordpressUrl);
+  }
+  if (options.frontendUrl && options.frontendUrl.substring(options.frontendUrl.length - 1) === "/") {
+    throw new Error("WPNuxt error: frontend url should not have a trailing slash: " + options.frontendUrl);
+  }
+}
+
+const _parseDoc = async (doc) => {
+  const { definitions } = parse(doc);
+  const operations = definitions.filter(({ kind }) => kind === "OperationDefinition").map((definition) => {
+    const operationDefinition = definition;
+    if (!operationDefinition.name?.value) {
+      throw new Error(`Operation name missing in: ${doc}`);
+    }
+    const query = {
+      name: operationDefinition.name.value.trim(),
+      nodes: [],
+      fragments: [],
+      params: {}
+    };
+    processSelections(operationDefinition.selectionSet.selections, 0, query);
+    return query;
+  });
+  return operations;
+};
+function processSelections(selections, level, query) {
+  if (!selections || selections.length === 0)
+    return;
+  if (selections.length === 1 && selections[0].kind === "Field") {
+    query.nodes.push(selections[0].name.value.trim());
+  }
+  selections.forEach((s) => {
+    if (s.kind === "FragmentSpread") {
+      query.fragments.push(s.name.value.trim());
+    } else if (s.selectionSet?.selections) {
+      processSelections(s.selectionSet.selections, level + 1, query);
+    }
+  });
+}
+const parseDoc = _parseDoc;
+
+async function prepareContext(ctx) {
+  const logger = getLogger();
+  if (ctx.docs) {
+    await prepareFunctions(ctx);
+  }
+  const fnName = (fn) => ctx.composablesPrefix + upperFirst(fn);
+  const fnExp = (q, typed = false) => {
+    const functionName = fnName(q.name);
+    if (!typed) {
+      return `export const ${functionName} = (params) => useWPContent('${q.name}', [${q.nodes?.map((n) => `'${n}'`).join(",")}], false, params)`;
+    }
+    const fragmentSuffix = q.fragments?.length && q.nodes?.includes("nodes") ? "[]" : "";
+    const fragments = q.fragments?.length ? q.fragments.map((f) => `${f}Fragment${fragmentSuffix}`).join(" | ") : "any";
+    return `  export const ${functionName}: (params?: ${q.name}QueryVariables) => AsyncData<${fragments}, FetchError | null | undefined>`;
+  };
+  ctx.generateImports = () => [
+    ...ctx.fns.map((f) => fnExp(f))
+  ].join("\n");
+  const types = [];
+  ctx.fns.forEach((o) => types.push(...getQueryTypeTemplate(o)));
+  ctx.generateDeclarations = () => [
+    `import type { ${[...new Set(types)].join(", ")} } from '#build/graphql-operations'`,
+    "import { AsyncData } from 'nuxt/app'",
+    "import { FetchError } from 'ofetch'",
+    "declare module '#wpnuxt' {",
+    ...[
+      ...ctx.fns.map((f) => fnExp(f, true))
+    ],
+    "}"
+  ].join("\n");
+  ctx.fnImports = ctx.fns.map((fn) => ({ from: "#wpnuxt", name: fnName(fn.name) }));
+  logger.debug("generated WPNuxt composables: ");
+  ctx.fns.forEach((f) => logger.debug(` ${fnName(f.name)}()`));
+}
+function getQueryTypeTemplate(q) {
+  const types = [];
+  types.push(`${q.name}QueryVariables`);
+  if (q.fragments && q.fragments.length > 0) {
+    q.fragments.forEach((f) => types.push(`${f}Fragment`));
+  }
+  return types;
+}
+async function prepareFunctions(ctx) {
+  if (!ctx.docs) {
+    getLogger().error("no GraphQL query documents were found!");
+    return;
+  }
+  for await (const doc of ctx.docs) {
+    const operations = await parseDoc(await promises.readFile(doc, "utf8"));
+    operations.forEach((query) => {
+      ctx.fns.push(query);
+    });
+  }
+}
+
+const allowDocument = (f, resolver) => {
+  const isSchema = f.match(/([^/]+)\.(gql|graphql)$/)?.[0]?.toLowerCase().includes("schema");
+  return !isSchema && !!statSync(resolver.resolve(f)).size;
+};
+async function generateWPNuxtComposables(ctx, queryOutputPath, resolver) {
+  const gqlMatch = "**/*.{gql,graphql}";
+  const documents = [];
+  const files = (await resolveFiles(queryOutputPath, [gqlMatch, "!**/schemas"], { followSymbolicLinks: false })).filter((doc) => allowDocument(doc, resolver));
+  documents.push(...files);
+  ctx.docs = documents;
+  await prepareContext(ctx);
+}
+
+const defaultConfigs = {
+  wordpressUrl: "",
+  frontendUrl: "",
+  defaultMenuName: "main",
+  enableCache: true,
+  staging: false,
+  logLevel: 3,
+  composablesPrefix: "useWP"
+};
+const module = defineNuxtModule({
+  meta: {
+    name,
+    version,
+    configKey: "wpNuxt",
+    nuxt: ">=3.1.0"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: defaultConfigs,
+  async setup(options, nuxt) {
+    const startTime = (/* @__PURE__ */ new Date()).getTime();
+    consola.log("::: Starting WPNuxt setup ::: ");
+    const publicWPNuxtConfig = {
+      wordpressUrl: process.env.WPNUXT_WORDPRESS_URL || options.wordpressUrl,
+      frontendUrl: process.env.WPNUXT_FRONTEND_URL || options.frontendUrl,
+      defaultMenuName: process.env.WPNUXT_DEFAULT_MENU_NAME || options.defaultMenuName,
+      enableCache: process.env.WPNUXT_ENABLE_CACHE ? process.env.WPNUXT_ENABLE_CACHE === "true" : options.enableCache,
+      staging: process.env.WPNUXT_STAGING === "true" || options.staging,
+      downloadSchema: process.env.WPNUXT_DOWNLOAD_SCHEMA === "true" || options.downloadSchema,
+      logLevel: process.env.WPNUXT_LOG_LEVEL ? Number.parseInt(process.env.WPNUXT_LOG_LEVEL) : options.logLevel,
+      composablesPrefix: process.env.WPNUXT_COMPOSABLES_PREFIX || options.composablesPrefix
+    };
+    nuxt.options.runtimeConfig.public.wpNuxt = publicWPNuxtConfig;
+    validateConfig(publicWPNuxtConfig);
+    const logger = initLogger(publicWPNuxtConfig.logLevel);
+    logger.info("Connecting GraphQL to", publicWPNuxtConfig.wordpressUrl);
+    logger.info("frontendUrl:", publicWPNuxtConfig.frontendUrl);
+    if (publicWPNuxtConfig.enableCache)
+      logger.info("Cache enabled");
+    logger.debug("Debug mode enabled, log level:", publicWPNuxtConfig.logLevel);
+    if (publicWPNuxtConfig.staging)
+      logger.info("Staging enabled");
+    const { resolve } = createResolver(import.meta.url);
+    const resolveRuntimeModule = (path) => resolve("./runtime", path);
+    const srcResolver = createResolver(nuxt.options.srcDir);
+    nuxt.options.alias["#wpnuxt"] = resolve(nuxt.options.buildDir, "wpnuxt");
+    nuxt.options.alias["#wpnuxt/*"] = resolve(nuxt.options.buildDir, "wpnuxt", "*");
+    nuxt.options.alias["#wpnuxt/types"] = resolve("./types");
+    nuxt.options.nitro.alias = nuxt.options.nitro.alias || {};
+    nuxt.options.nitro.alias["#wpnuxt/types"] = resolve("./types");
+    nuxt.options.nitro.externals = nuxt.options.nitro.externals || {};
+    nuxt.options.nitro.externals.inline = nuxt.options.nitro.externals.inline || [];
+    addPlugin({
+      src: resolveRuntimeModule("plugins/vue-sanitize-directive")
+    });
+    addImports([
+      { name: "isStaging", as: "isStaging", from: resolveRuntimeModule("./composables/isStaging") },
+      { name: "useWPContent", as: "useWPContent", from: resolveRuntimeModule("./composables/useWPContent") },
+      { name: "parseDoc", as: "parseDoc", from: resolveRuntimeModule("./composables/useParser") },
+      { name: "usePrevNextPost", as: "usePrevNextPost", from: resolveRuntimeModule("./composables/usePrevNextPost") },
+      { name: "loginUser", as: "loginUser", from: resolveRuntimeModule("./composables/user") },
+      { name: "logoutUser", as: "logoutUser", from: resolveRuntimeModule("./composables/user") },
+      { name: "getCurrentUserId", as: "getCurrentUserId", from: resolveRuntimeModule("./composables/user") },
+      { name: "getCurrentUserName", as: "getCurrentUserName", from: resolveRuntimeModule("./composables/user") },
+      { name: "useTokens", as: "useTokens", from: resolveRuntimeModule("./composables/useTokens") },
+      { name: "useWPUri", as: "useWPUri", from: resolveRuntimeModule("./composables/useWPUri") },
+      { name: "useFeaturedImage", as: "useFeaturedImage", from: resolveRuntimeModule("./composables/useFeaturedImage") }
+    ]);
+    addComponentsDir({
+      path: resolveRuntimeModule("./components"),
+      pathPrefix: false,
+      prefix: "",
+      global: true
+    });
+    addServerHandler({
+      route: "/api/wpContent",
+      handler: resolveRuntimeModule("./server/api/wpContent.post")
+    });
+    addServerHandler({
+      route: "/api/purgeCache",
+      handler: resolveRuntimeModule("./server/api/purgeCache.get")
+    });
+    await installModule("@vueuse/nuxt", {});
+    const queryOutputPath = resolve((nuxt.options.srcDir || nuxt.options.rootDir) + "/.queries/");
+    await promises.rm(queryOutputPath, { recursive: true, force: true });
+    const userQueryPath = "~/extend/queries/".replace(/^(~~|@@)/, nuxt.options.rootDir).replace(/^(~|@)/, nuxt.options.srcDir);
+    const userQueryPathExists = existsSync(userQueryPath);
+    cpSync(resolveRuntimeModule("./queries/"), queryOutputPath, { recursive: true });
+    if (hasNuxtModule("@wpnuxt/blocks")) {
+      for (const m of nuxt.options._installedModules) {
+        if (m.meta.name === "@wpnuxt/blocks" && m.entryPath) {
+          logger.debug("Loading queries from @wpnuxt/blocks");
+          let blocksQueriesPath;
+          if (m.entryPath.startsWith("../")) {
+            blocksQueriesPath = join(nuxt.options.rootDir, "../", m.entryPath, "./runtime/queries/");
+          } else {
+            blocksQueriesPath = join("./node_modules", m.entryPath, "dist/runtime/queries/");
+          }
+          cpSync(blocksQueriesPath, queryOutputPath, { recursive: true });
+        }
+      }
+    } else {
+      logger.debug("Tip: Install the @wpnuxt/blocks module if you want to render Gutenberg blocks with separate vue components");
+      addTemplate({
+        write: true,
+        filename: "wpnuxt/blocks.mjs",
+        getContents: () => `export { }`
+      });
+      nuxt.options.alias["#wpnuxt/blocks"] = resolve(nuxt.options.buildDir, "wpnuxt/blocks");
+    }
+    if (userQueryPathExists) {
+      logger.debug("Extending queries:", userQueryPath);
+      cpSync(resolve(userQueryPath), queryOutputPath, { recursive: true });
+    }
+    logger.debug("Copied merged queries in folder:", queryOutputPath);
+    await installModule("nuxt-graphql-middleware", {
+      debug: publicWPNuxtConfig.logLevel ? publicWPNuxtConfig.logLevel > 3 : false,
+      graphqlEndpoint: `${publicWPNuxtConfig.wordpressUrl}/graphql`,
+      downloadSchema: publicWPNuxtConfig.downloadSchema,
+      codegenConfig: {
+        silent: false,
+        skipTypename: true,
+        useTypeImports: true,
+        // inlineFragmentTypes: 'combine',
+        dedupeFragments: true,
+        onlyOperationTypes: true,
+        avoidOptionals: false,
+        maybeValue: "T | undefined",
+        disableOnBuild: false,
+        gqlImport: "graphql-request#wpnuxt",
+        namingConvention: {
+          enumValues: "change-case-all#upperCaseFirst"
+        },
+        documents: [
+          resolve("!./graphql/**/*")
+        ]
+      },
+      codegenSchemaConfig: {
+        urlSchemaOptions: {
+          headers: {
+            Authorization: "server-token"
+          }
+        }
+      },
+      outputDocuments: true,
+      autoImportPatterns: queryOutputPath,
+      includeComposables: true,
+      devtools: true
+    });
+    const resolvedPath = resolveRuntimeModule("./app/graphqlMiddleware.serverOptions");
+    const template = addTemplate({
+      filename: "graphqlMiddleware.serverOptions.ts",
+      write: true,
+      getContents: () => `
+      import type { GraphqlMiddlewareServerOptions } from '#graphql-middleware/types'
+      import serverOptions from '${resolvedPath}'
+      import type { GraphqlServerResponse } from '#graphql-middleware/types'
+      import type { GraphqlMiddlewareResponseUnion } from '#build/nuxt-graphql-middleware'
+
+      type GraphqlResponseAdditions =
+        typeof serverOptions extends GraphqlMiddlewareServerOptions<infer R> ? R : {}
+
+      export type GraphqlResponse<T> = GraphqlServerResponse<T> & GraphqlResponseAdditions
+
+      export type GraphqlResponseTyped = GraphqlResponse<GraphqlMiddlewareResponseUnion>
+
+      export { serverOptions }
+      `
+    });
+    nuxt.options.nitro.externals.inline.push(template.dst);
+    nuxt.options.alias["#graphql-middleware-server-options-build"] = template.dst;
+    logger.trace("Start generating composables");
+    const ctx = await {
+      fns: [],
+      fnImports: [],
+      composablesPrefix: publicWPNuxtConfig.composablesPrefix
+    };
+    await generateWPNuxtComposables(ctx, queryOutputPath, srcResolver);
+    addTemplate({
+      write: true,
+      filename: "wpnuxt/index.mjs",
+      getContents: () => ctx.generateImports?.() || ""
+    });
+    addTypeTemplate({
+      write: true,
+      filename: "wpnuxt/index.d.ts",
+      getContents: () => ctx.generateDeclarations?.() || ""
+    });
+    nuxt.hook("imports:extend", (autoimports) => {
+      autoimports.push(...ctx.fnImports || []);
+    });
+    nuxt.hook("nitro:init", async (nitro) => {
+      const keys = await nitro.storage.getKeys("cache:content");
+      keys.forEach(async (key) => {
+        if (key.startsWith("cache:content"))
+          await nitro.storage.removeItem(key);
+      });
+    });
+    const endTime = (/* @__PURE__ */ new Date()).getTime();
+    logger.success("::: Finished WPNuxt setup in " + (endTime - startTime) + "ms ::: ");
+  }
+});
+
+export { module as default };

package/dist/runtime/app/graphqlMiddleware.serverOptions.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt-graphql-middleware").GraphqlMiddlewareServerOptions<object>;
+export default _default;

package/dist/runtime/app/graphqlMiddleware.serverOptions.js

@@ -0,0 +1,11 @@
+import { defineGraphqlServerOptions } from "nuxt-graphql-middleware/dist/runtime/serverOptions";
+import { getHeader } from "h3";
+export default defineGraphqlServerOptions({
+  serverFetchOptions(event) {
+    return {
+      headers: {
+        Authorization: getHeader(event, "Authorization")
+      }
+    };
+  }
+});

package/dist/runtime/components/ContentRenderer.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { NodeWithContentEditorFragment } from '#build/graphql-operations'
+
+defineProps<{
+  post: NodeWithContentEditorFragment
+}>()
+</script>
+
+<template>
+  <div
+    v-sanitize="post.content"
+  />
+</template>