@contoprix/nuxt

@contoprix/nuxt

Nuxt 3/Nitro integration for Contoprix. It combines Vue composables and renderers with server-side delivery helpers, prerender paths, preview cookies, protected preview routes, and signed webhooks.

Requirements and installation

• Vue 3.4 or newer
• H3 1.8 or newer

npm install @contoprix/nuxt h3 vue

Use explicit entry points:

• @contoprix/nuxt/server in Nitro routes, server utilities, and build hooks
• @contoprix/nuxt/client in Vue components and client plugins
• @contoprix/nuxt for shared helper option types

Runtime configuration

Keep server credentials private and expose only a restricted delivery key to the browser:

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    contoprixClientId: process.env.CONTOPRIX_CLIENT_ID,
    contoprixClientSecret: process.env.CONTOPRIX_CLIENT_SECRET,
    contoprixPreviewSecret: process.env.CONTOPRIX_PREVIEW_SECRET,
    contoprixWebhookSecret: process.env.CONTOPRIX_WEBHOOK_SECRET,
    public: {
      contoprixBaseUrl: process.env.NUXT_PUBLIC_CONTOPRIX_BASE_URL,
      contoprixDeliveryKey: process.env.NUXT_PUBLIC_CONTOPRIX_DELIVERY_KEY
    }
  }
});

The server helpers can automatically read CONTOPRIX_BASE_URL and either CONTOPRIX_CLIENT_ID plus CONTOPRIX_CLIENT_SECRET, or CONTOPRIX_DELIVERY_KEY from process.env.

Server-side page fetching

Keep the server entry point in Nitro code. For example, expose a small same-origin API route:

// server/api/contoprix/page.get.ts
import { getQuery } from "h3";
import { getContoprixPage } from "@contoprix/nuxt/server";

export default defineEventHandler((event) => {
  const query = getQuery(event);
  const slug = typeof query.slug === "string" ? query.slug : "/";

  return getContoprixPage({ slug, languageCode: "en" });
});

Fetch that route from the universal Vue page and render the result:

<script setup lang="ts">
import { PageRenderer, type ComponentRegistry } from "@contoprix/nuxt/client";
import Hero from "~/components/contoprix/Hero.vue";

const route = useRoute();
const segments = Array.isArray(route.params.slug)
  ? route.params.slug
  : route.params.slug
    ? [String(route.params.slug)]
    : [];
const slug = segments.length === 0 ? "/" : `/${segments.join("/")}`;
const { data: page } = await useFetch("/api/contoprix/page", {
  query: { slug }
});

const components: ComponentRegistry = { hero: Hero };
</script>

<template>
  <PageRenderer :page="page" :components="components" />
</template>

Other server helpers:

import {
  createContoprixClient,
  getContoprixContent,
  searchContoprix
} from "@contoprix/nuxt/server";

const client = createContoprixClient({ languageCode: "en" });
const article = await getContoprixContent({
  contentType: "blog",
  entryId: "ENTRY_ID"
});
const search = await searchContoprix({ query: "pricing", take: 10 });

Browser client

Resolve public runtime config yourself and pass it explicitly:

import { createContoprixClient } from "@contoprix/nuxt/client";

const config = useRuntimeConfig();
const client = createContoprixClient({
  baseUrl: config.public.contoprixBaseUrl,
  auth: {
    type: "deliveryKey",
    deliveryKey: config.public.contoprixDeliveryKey
  }
});

The browser helper rejects client-credentials authentication. Use it with ContoprixProvider, or use the re-exported Vue composables after providing the client.

<script setup lang="ts">
import {
  ContoprixProvider,
  useSearch
} from "@contoprix/nuxt/client";
</script>

See @contoprix/vue for component registries, composables, renderers, generic fallback rendering, and visual editing.

Add sitemap paths to Nitro prerendering

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    async "nitro:config"(nitroConfig) {
      const { getContoprixSitemapPaths } = await import(
        "@contoprix/nuxt/server"
      );

      nitroConfig.prerender ??= {};
      nitroConfig.prerender.routes = [
        ...(nitroConfig.prerender.routes ?? []),
        ...(await getContoprixSitemapPaths({ languageCode: "en" }))
      ];
    }
  }
});

Preview route

The preview helper validates a shared secret, creates an HTTP-only preview cookie, and permits only same-origin relative redirects.

// server/routes/api/contoprix/preview.ts
import { defineEventHandler } from "h3";
import { handleContoprixPreviewRequest } from "@contoprix/nuxt/server";

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event);

  return handleContoprixPreviewRequest(event, {
    secret: config.contoprixPreviewSecret,
    defaultSlug: "/"
  });
});

For a cross-origin HTTPS admin iframe, configure the cookie accordingly:

cookie: { sameSite: "none", secure: true }

Check the cookie in server-side page logic:

import {
  getContoprixPage,
  getContoprixPreviewPage,
  isContoprixPreviewEnabled
} from "@contoprix/nuxt/server";

const event = useRequestEvent()!;
const page = isContoprixPreviewEnabled(event)
  ? await getContoprixPreviewPage({ pageId: "PAGE_ID" })
  : await getContoprixPage({ slug: "/about" });

Preview fetching requires a pageId; carry or resolve it as part of your preview integration.

Signed webhook route

// server/routes/api/contoprix/webhook.post.ts
import { defineEventHandler } from "h3";
import { handleContoprixWebhook } from "@contoprix/nuxt/server";

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event);

  return handleContoprixWebhook(event, {
    secret: config.contoprixWebhookSecret,
    async onPagePublished(payload) {
      console.log("Published", payload.data.slug);
      // Purge the cache used by this application.
    }
  });
});

The helper verifies x-contoprix-signature with HMAC-SHA256. It does not automatically clear Nitro caches; use the callbacks to invalidate the caching strategy your application actually uses.

Security

• Keep client credentials, preview secrets, and webhook secrets in private runtime config.
• Expose only a restricted website delivery key through runtimeConfig.public.
• Use HTTPS with SameSite=None preview cookies.
• Create clients per request/render tree in SSR applications.

License

MIT