@42flowsdotcom/nuxt-content

@42flowsdotcom/nuxt-content

Receive 42flows-generated MDC content in your Nuxt Content site.

The receiver also hosts a private-credential-derived IndexNow verification key at the site origin. 42flows verifies that route daily and submits each newly delivered URL automatically. No additional customer configuration is needed.

One module. Four modes. Zero per-customer adaptation. You pick the contract that fits your existing app; we honor it.

Install

npm install @42flowsdotcom/nuxt-content @nuxt/content

In nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/content', '@42flowsdotcom/nuxt-content'],
})

In content.config.ts (at repo root):

import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      type: 'page',
      source: 'blog/**/*.md',
    }),
  },
})

That's it. By default the module registers /blog/:slug and renders any markdown 42flows delivers to content/blog/.

Built-in discovery + presentation (v0.10.0+)

Every mode ships, zero-config:

• Per-article SEO head — canonical, meta description, full Open Graph (incl og:url), Twitter card, and an Article JSON-LD fallback (deduped when the article body already embeds schema). No more homepage tags leaking into article heads.
• /sitemap-42flows.xml — a sitemap for the delivered collection. When you run @nuxtjs/sitemap, delivered URLs are also merged into YOUR sitemap automatically.
• /llms.txt — generated from the collection for AI answer engines. Your own static public/llms.txt always wins.
• Index page at <blogRoutePrefix> — lists the collection with CollectionPage JSON-LD. Your own file-based index page always wins.
• Theme-agnostic styling — article typography and all MDC components derive their colors from your theme's currentColor (mid-tone accents + transparent tints), so delivered content is legible on light AND dark themes with no configuration and no Tailwind dependency.
• Native hooks — flows42.layout: '<name>' renders the auto-page inside your named layout; useFlows42List() lets your own listing pages merge delivered articles; useFlows42Page({ seo: true }) adds the full SEO head in headless mode.

Disable individually with flows42: { sitemap: false, llmsTxt: false, indexPage: false }.

Pick a rendering mode

You get four contracts. Pick one based on what your app already has.

Mode 1: auto (default)

export default defineNuxtConfig({
  modules: ['@nuxt/content', '@42flowsdotcom/nuxt-content'],
  // No flows42 block needed — auto is default
})

If pages/blog/[slug].vue exists in your repo, Nuxt's file-based router prefers it over our auto-page. You'll see a build warning telling you to pick takeover, headless, or delete the page.

Mode 2: takeover

export default defineNuxtConfig({
  modules: ['@nuxt/content', '@42flowsdotcom/nuxt-content'],
  flows42: {
    takeover: true,
  },
})

Forces our auto-page to win even if you have a colliding file. Your pages/blog/[slug].vue stays in the repo (we don't delete files) but won't render. Use when you want 42flows to fully own /blog/* and you don't want to manually delete an old template.

Mode 3: headless

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/content', '@42flowsdotcom/nuxt-content'],
  flows42: {
    mode: 'headless',
  },
})

<!-- pages/blog/[slug].vue (you keep your own page) -->
<script setup lang="ts">
const { page } = await useFlows42Page()
if (!page.value) throw createError({ statusCode: 404, fatal: true })

useSeoMeta({
  title: (page.value as any).meta_title,
  description: (page.value as any).meta_description,
})
</script>

<template>
  <article class="my-custom-layout">
    <header>
      <h1>{{ (page as any).title }}</h1>
      <p class="byline">Published {{ (page as any).published_at }}</p>
    </header>
    <ContentRenderer :value="page" />
    <MyCustomFooter />
  </article>
</template>

useFlows42Page() is auto-imported. By default it queries the blog collection at the current route's path. Override with useFlows42Page({ collection: 'posts', path: '/posts/my-slug' }).

The composable also emits the 42flows delivery marker in <head> — required so the 42flows backend can verify the URL serves your delivered content.

Mode 4: dual-source (coexistence with existing DB blog)

For customers with an existing DB-backed blog (admin UI, SEO equity, hundreds of posts) who want 42flows to coexist rather than replace.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/content', '@42flowsdotcom/nuxt-content'],
  flows42: {
    mode: 'dual-source',
  },
})

<!-- pages/blog/[slug].vue -->
<script setup lang="ts">
const route = useRoute()

// Try 42flows first
const { page: flows42Page } = await useFlows42Page()

// Fall back to your existing data source if 42flows didn't have it
const { data: dbPost } = await useFetch(
  flows42Page.value ? null : `/api/blog/posts/${route.params.slug}`,
)

const post = computed(() => flows42Page.value || dbPost.value)
if (!post.value) throw createError({ statusCode: 404, fatal: true })
</script>

<template>
  <article class="my-blog-layout">
    <ContentRenderer v-if="flows42Page" :value="flows42Page" />
    <LegacyBlogPost v-else :post="dbPost" />
  </article>
</template>

42flows-delivered articles render via ContentRenderer. Existing DB articles continue rendering through your existing component. Both share /blog/:slug. URL ownership is decided per-slug by which source has the article.

Migrating an existing blog page to headless mode

You probably have something like this today:

<!-- BEFORE: pages/blog/[slug].vue -->
<script setup>
const route = useRoute()
const { data: post } = await useFetch(`/api/blog/posts/${route.params.slug}`)
if (!post.value) throw createError({ statusCode: 404, fatal: true })

useSeoMeta({ title: post.value.title, description: post.value.metaDescription })
</script>

<template>
  <article class="my-blog-layout">
    <h1>{{ post.title }}</h1>
    <div v-html="post.content" />
  </article>
</template>

After moving to 42flows + headless mode:

<!-- AFTER: pages/blog/[slug].vue -->
<script setup>
const { page } = await useFlows42Page()
if (!page.value) throw createError({ statusCode: 404, fatal: true })

useSeoMeta({
  title: (page.value as any).meta_title,
  description: (page.value as any).meta_description,
})
</script>

<template>
  <article class="my-blog-layout">
    <h1>{{ (page as any).title }}</h1>
    <ContentRenderer :value="page" />
  </article>
</template>

Two changes: replace the useFetch(...) line with useFlows42Page(), replace the v-html body with <ContentRenderer>. Your wrapper, classes, layout, and SEO logic don't move.

Module options reference

flows42: {
  // Mode (per modes table above) — default 'auto'
  mode: 'auto' | 'headless' | 'dual-source',

  // In 'auto' mode only: replace customer's colliding [slug].vue with ours
  takeover: false,

  // Where 42flows writes .md files (default 'content/blog')
  contentPath: 'content/blog',

  // Public URL prefix for blog post pages (default '/blog')
  blogRoutePrefix: '/blog',

  // Nuxt Content v3 collection name to query (default 'blog')
  collectionName: 'blog',

  // Receiver endpoint prefix (default '/api/42flows')
  routePrefix: '/api/42flows',

  // Register the 5 built-in MDC components (default true)
  components: true,

  // Show "Powered by 42flows" footer (default true on Starter; false on Premium)
  showPoweredBy: true,

  // Shared secret for receiver POST auth (falls back to FLOWS42_API_KEY env var)
  apiKey: '',

  // (Legacy) skip auto-page registration. Prefer mode: 'headless' instead.
  autoPage: true,
}

Built-in MDC components

The module auto-registers these globally. They render 42flows MDC content without any extra setup:

To override any component's styling, create a file with the same name in your project's components/content/ directory. Nuxt's component resolution prefers yours.

To disable all built-in components: flows42: { components: false }.

Server endpoints

Direct-receiver mode (POST endpoint) is used when you connect to 42flows without GitHub. For GitHub delivery, the backend commits markdown directly to your repo and these endpoints aren't called.

Compatibility

• Nuxt 3 + Nuxt 4
• @nuxt/content v3 (v2 is not supported)

License

MIT