Setting Up MDX Blog in Vike Without Using Pages

[abdrahmanrizk]

I'm trying to set up an MDX-based blog in a Vike project, but instead of using the default pages/ approach, I want a more flexible setup where:

• I can generate a Table of Contents (TOC) easily
• I can use custom MDX components
• Content is managed dynamically rather than being tied directly to pages/

What I've Tried

// lib/mdx/posts.ts
import { slugify } from "../../utils/slugify";
import { type ComponentType } from "react";

type PostMeta = {
  title: string;
  description: string;
  published: string;
  lastUpdate?: string;
  tags?: string[];
  readingTime?: number;
  category?: string[];
  coverImage?: string;
};

type MDXModule = {
  default: ComponentType<{ components?: Record<string, unknown> }>;
  meta: PostMeta;
};

const mdxFiles = import.meta.glob<MDXModule>("/content/*.mdx", {
  eager: true,
});

const posts = new Map(
  Object.entries(mdxFiles).map(([path, loader]) => [
    slugify(path),
    {
      Component: loader.default,
      meta: loader.meta,
    },
  ])
);

async function getPostMeta(slug: string) {
  const post = posts.get(slug);

  if (!post) {
    throw new Error(`Post "${slug}" not found`);
  }

  const meta = post.meta;

  return {
    meta,
  };
}

function getAllPostsMeta() {
  return [...posts.entries()].map(([slug, post]) => ({
    slug,
    meta: post.meta,
  }));
}

function getPost(slug: string) {
  const post = posts.get(slug);

  if (!post) throw new Error(`Post "${slug}" not found`);

  return post;
}

export { getPost, getPostMeta, getAllPostsMeta };

// pages/articles/@slug/+Page.tsx
import { useData } from "vike-react/useData";
import type { Data } from "./+data";
import { getPost } from "../../../lib/mdx/posts";

export default function Page() {
  const slug = useData<Data>();
  const Post = getPost(slug);
  return (
    <article>
      <Post.Component />
    </article>
  );
}

Problems with This Approach

All content is loaded on the frontend, which isn’t ideal for performance and SEO.

I tried using lazy components, but the issue is that I can't use them without wrapping them in Suspense, which forces client-side rendering instead of server-side rendering.

Any existing examples or best practices for this approach?
Thanks in advance for any help!

[brillout]

Have you seen https://vike.dev/markdown#metadata? See also #1082 (comment) — we're planing to update the official metadata recommendation. If you can wait a bit, I can show you the pageContext.globalContext.pages (not released yet) approach, ETA being this week.

[brillout]

I can show you the pageContext.globalContext.pages (not released yet) approach, ETA being this week.

Follow up: #1082 (reply in thread). Let's continue the conversation over there.

[brillout]

Content is managed dynamically rather than being tied directly to pages/

Possibly related: https://vike.dev/onBeforePrerenderStart. I guess you'll be using pre-rendring.