First content type

Bind the Content Engine buildersCopy Anchor Link

Edit src/api/builders.ts. The generated file binds the API builders. Add the Content Engine ones next to them, so no file in your plugin has to spell out its plugin id:

import { bindApiPlugin } from "@vitnode/core/api/lib/bind-api-plugin";
import { bindContentPlugin } from "@vitnode/core/content/server"; 

import { manifest } from "@/manifest.gen";

export const { buildModule, buildRoute } = bindApiPlugin(manifest);
export const { buildContentAdminModule, buildContentPublicModule } =
  bindContentPlugin(manifest);

vitnode dev and vitnode build write src/manifest.gen.ts from your package.json, and manifest.id is the plugin id.

Define the articleCopy Anchor Link

Create src/content/article.ts. This is the complete file:

import { defineContentType, field } from "@vitnode/core/content";

export const articleContentType = defineContentType({
  id: "newsroom.article",
  tableName: "newsroom_articles",

  fields: {
    title: field.text({ required: true, minLength: 3, maxLength: 200 }),
    slug: field.slug({ source: "title" }),
    body: field.richText({ required: true }),
  },

  admin: {
    path: "newsroom/articles",
    titleField: "title",
    list: {
      columns: ["title", "slug", "updatedAt"],
      orderableFields: ["title"],
    },
  },
});

• id is plugin.entity. The part after the dot, article, names the translations and the permissions.
• tableName is the Postgres table.
• The engine fills slug from the title when you leave it empty, and keeps it when the title changes later, so links keep working.
• body is rich text. The AdminCP shows an editor, and the database stores a JSON document.
• admin.path puts the screen at /admin/content/newsroom/articles. list.columns may name your fields and the system columns id, createdAt and updatedAt.

Fields lists every field helper.

Create the modelCopy Anchor Link

Create src/database/articles.ts. createContentModel turns the definition into a Drizzle table, validation schemas and a service:

import { createContentModel } from "@vitnode/core/content/server";

import { articleContentType } from "@/content/article";

export const articleContent = createContentModel(articleContentType);

export const newsroom_articles = articleContent.table;

Export the table. Migrations find tables through the exports of your plugin's built src/database/*.js files, so a table nobody exports never gets created.

Register the staff API routesCopy Anchor Link

Create src/api/modules/admin/admin.module.ts:

import { buildContentAdminModule, buildModule } from "@/api/builders";
import { articleContent } from "@/database/articles";

export const adminModule = buildModule({
  name: "admin",
  routes: [],
  modules: [buildContentAdminModule({ contentTypes: [articleContent] })],
});

Then add it to the plugin's API. This is an excerpt of src/config.api.ts:

import { adminModule } from "./api/modules/admin/admin.module"; 
import { helloModule } from "./api/modules/hello/hello.module";

export const newsroomApiPlugin = () =>
  buildApiPlugin({
    manifest,
    modules: [helloModule, adminModule], 
  });

The routes live under /api/newsroom/admin/content/article and answer only staff signed in to the AdminCP. Keep the module named admin, because the API checks the AdminCP session on paths that contain /admin/.

Add the AdminCP screenCopy Anchor Link

Create src/admin/nav.tsx with the sidebar link:

import { NewspaperIcon } from "lucide-react";

import { articleContentType } from "@/content/article";
import { manifest } from "@/manifest.gen";

export const adminNav = {
  pluginId: manifest.id,
  contentTypes: [{ definition: articleContentType, icon: <NewspaperIcon /> }],
};

Create src/admin/content.tsx and reuse the same list for the screen:

export { adminNav as adminContent } from "./nav";

VitNode finds both files by their names and exports. They are separate because the sidebar loads on every AdminCP page, while the screen and its forms load only when someone opens it. AdminCP shows how to customize the list and the form later.

Add the labelsCopy Anchor Link

Edit src/locales/en.json. The home keys came with the generated plugin. Add everything else:

{
  "newsroom": {
    "home": {
      "api": "Your plugin's API answered:",
      "desc": "This page ships inside the plugin and is served by the app that installed it.",
      "title": "Hello from your plugin"
    },
    "title": "Newsroom",
    "content": {
      "article": {
        "label": "{count, plural, one {Article} other {Articles}}",
        "title": "Articles",
        "desc": "News and updates for your community.",
        "fields": {
          "title": "Title",
          "slug": "Slug",
          "body": "Body",
          "updatedAt": "Updated"
        }
      }
    }
  },
  "newsroom:article": "Articles",
  "newsroom:article:can_view": "View articles",
  "newsroom:article:can_create": "Create articles",
  "newsroom:article:can_edit": "Edit articles",
  "newsroom:article:can_delete": "Delete articles"
}

• title names the sidebar group. Under content.article, buttons such as Create Article use label, and title and desc head the list.
• The newsroom:article:* keys label the four staff permissions the Content Engine generated. A missing key shows the raw permission id.

Build and migrateCopy Anchor Link

Run these from the workspace root. db:migrate reads your plugin's built files, so build first:

bun run build:plugins
bun run db:migrate

While pnpm dev runs, it rebuilds the plugin on every save, so db:migrate alone is enough. The command writes a migration to apps/api/migrations/ and applies it:

CREATE TABLE "newsroom_articles" (
	"id" serial PRIMARY KEY,
	"createdAt" timestamp DEFAULT now() NOT NULL,
	"updatedAt" timestamp DEFAULT now() NOT NULL,
	"title" varchar(200) NOT NULL,
	"slug" varchar(160) NOT NULL,
	"body" jsonb NOT NULL
);
CREATE UNIQUE INDEX "newsroom_articles_slug_key" ON "newsroom_articles" ("slug");

You declared three fields, and the engine added the id and the timestamps. Commit the migration with your code. Migrations covers what else it generates.

Create an articleCopy Anchor Link

Start the app with pnpm dev and open AdminCP → Newsroom → Articles. Click Create Article, enter the title Welcome to the newsroom, leave Slug empty and write a sentence in Body:

Click Create. A toast confirms it and the list shows the new row with the slug welcome-to-the-newsroom. Create a second article, Release notes for October. The next tutorials use both.