@xleddyl/nuxt-cms 0.2.1 → 0.2.3

package/README.md

@@ -8,6 +8,8 @@ nuxt-cms is a Nuxt module that leverages the Nitro server to ship a lightweight
 
 - **Zero extra infrastructure**: the CMS runs inside your app's Nitro server; you deploy one thing.
 - **Content types in code**: a `cms.config.ts` with `defineCmsConfig()` declares collections, single documents, relations, blocks and translatable fields; database schema, migrations and TypeScript types are generated from it.
+- **Content with blocks**: news, blog and other content types with title, slug, cover, SEO fields and a body built from your own site components, drafts and scheduled publishing; `<CmsBlocks>` renders the body with typed props.
+- **Visual editor**: content items (and any blocks field built from site components) are edited on a live preview of your own site, with drag and drop, a block palette, per-locale and mobile previews, scheduling and publishing.
 - **Admin panel at `/cms`**: entry editing with validation, drafts, media library (S3-compatible storage, a directory on the server's disk, or a local mode backed directly by your `public/` folder), single-admin auth from env credentials.
 - **Public GraphQL API**: read-only, typed end-to-end via gql.tada, with filtering, sorting and pagination; fields marked `private` stay out of it.
 - **SQLite, Postgres, libSQL/Turso or Cloudflare D1**: a local file database by default, one config line to switch (including remote SQLite over the network).
@@ -99,7 +101,7 @@ Full documentation lives in [`docs/`](docs/README.md):
 - [Configuration](docs/configuration.md) — every `cms.*` option and the `NUXT_CMS_*` env vars.
 - [Database](docs/database.md) — SQLite, Postgres, libSQL/Turso and D1 drivers, migrations, studio.
 - [Schema](docs/schema.md) — `defineCmsConfig`, entries, pages, field types, relations, blocks, i18n.
-- [Querying content](docs/querying.md) — GraphQL API, `useCmsSingle` / `useCmsCollection` / `useCmsPage` / `useCms` / `$cmsQuery`, filters, sorting, pagination.
+- [Querying content](docs/querying.md) — GraphQL API, `useCmsSingle` / `useCmsCollection` / `useCmsPage` / `useCmsContents` / `useCmsContent` / `useCms` / `$cmsQuery`, `<CmsBlocks>`, filters, sorting, pagination.
 - [Admin panel & security](docs/admin.md) — pages, authentication, sessions, admin REST API.
 - [Media](docs/media.md) — S3-compatible storage, filesystem storage on the server's disk, or local mode backed by your `public/` folder, upload flow, allowed file types.
 - [Deployment](docs/deployment.md) — host/driver matrix, migrations on serverless, horizontal scaling, Cloudflare Workers.

package/dist/module.d.mts

@@ -52,6 +52,10 @@ interface ModuleOptions {
     graphql?: {
         maxDepth?: number;
     };
+    preview?: {
+        path?: string;
+        component?: string;
+    };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -3,20 +3,86 @@ import { existsSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { join, isAbsolute, resolve, relative, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { defineNuxtModule, createResolver, useLogger, addImports, addTemplate, addServerPlugin, addTypeTemplate, addVitePlugin, addComponentsDir, addRouteMiddleware, extendPages, addServerHandler, resolvePath } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, useLogger, addImports, addTemplate, addServerPlugin, addTypeTemplate, addVitePlugin, addComponentsDir, addRouteMiddleware, extendPages, addServerHandler, resolvePath, addComponent } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
 import svgLoader from 'vite-svg-loader';
 import { introspectionFromSchema, buildSchema } from 'graphql';
 import { minifyIntrospection, outputIntrospectionFile } from 'gql.tada/internal';
 import { createJiti } from 'jiti';
-import { typeName, blockTypeName, blocksFieldTypeName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
+import { typeName, blockTypeName as blockTypeName$1, blocksFieldTypeName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
 import { migrationsDirFor } from '../dist/runtime/shared/migrations-dir.js';
-import { pageColumnFields, isTranslatableField, isTranslatableMediaField, isMultiSelect, pageAllFields, PAGE_PATH_FIELD, pageRoutes, layoutErrors, listErrors, mobileMediaKey, fieldConditions, pageFieldsTableName, pageMediaTableName, isRequiredField, pageFields, isPrivateField, entryFieldsFor, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE, expandMobileMedia } from '../dist/runtime/shared/index.js';
+import { entryFieldsFor, isPrivateField, blockTypeName, pageColumnFields, isTranslatableField, isTranslatableMediaField, isMultiSelect, pageAllFields, normalizeContentEntries, PAGE_PATH_FIELD, pageRoutes, isCollectionKind, layoutErrors, listErrors, mobileMediaKey, fieldConditions, CONTENT_SLUG_FIELD, pageFieldsTableName, pageMediaTableName, CONTENT_SYSTEM_FIELDS, isRequiredField, pageFields, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE, normalizeCmsConfig } from '../dist/runtime/shared/index.js';
+import { previewPathErrors, DEFAULT_CMS_PREVIEW_PATH } from '../dist/runtime/shared/preview.js';
 import { scanMediaDirectory, readMediaFileMeta } from '../dist/runtime/server/utils/media-sync.js';
 import { createHash } from 'node:crypto';
 import { readFile } from 'node:fs/promises';
 import { routePathsFromDir, resolvePageRoutes } from '../dist/runtime/shared/page-routes.js';
 
+function componentPascalName(name) {
+  return name.split(/[-_\s]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function collectBlockComponents(config) {
+  const refs = [];
+  for (const [entryName, entry] of Object.entries(config)) {
+    for (const [fieldKey, field] of Object.entries(entryFieldsFor(entry))) {
+      if (field.type !== "blocks" || isPrivateField(field)) continue;
+      for (const [blockName, block] of Object.entries(field.blocks ?? {})) {
+        if (typeof block.component !== "string" || !block.component.trim()) continue;
+        refs.push({
+          entry: entryName,
+          field: fieldKey,
+          block: blockName,
+          component: componentPascalName(block.component.trim()),
+          typeName: blockTypeName(entryName, fieldKey, blockName)
+        });
+      }
+    }
+  }
+  return refs;
+}
+function collectPreviewComponents(config, fallback) {
+  const refs = [];
+  for (const [entryName, entry] of Object.entries(config)) {
+    if (entry.kind !== "content") continue;
+    const name = entry.preview?.component ?? fallback;
+    if (typeof name !== "string" || !name.trim()) continue;
+    refs.push({ entry: entryName, component: componentPascalName(name.trim()) });
+  }
+  return refs;
+}
+function missingPreviewComponents(refs, available) {
+  const known = new Set(available);
+  return refs.filter((ref) => !known.has(ref.component)).map(
+    (ref) => `cms.config entry '${ref.entry}': preview component '${ref.component}' is not a registered Nuxt component`
+  );
+}
+function missingBlockComponents(refs, available) {
+  const known = new Set(available);
+  return refs.filter((ref) => !known.has(ref.component)).map(
+    (ref) => `cms.config entry '${ref.entry}', field '${ref.field}', block '${ref.block}': component '${ref.component}' is not a registered Nuxt component`
+  );
+}
+function renderBlocksFile(refs, previews = []) {
+  const components = [...new Set([...refs, ...previews].map((ref) => ref.component))].sort();
+  const lines = [`import type { Component } from 'vue'`];
+  if (components.length)
+    lines.push(
+      `import { ${components.map((name) => `Lazy${name}`).join(", ")} } from '#components'`
+    );
+  lines.push(
+    ``,
+    `export const cmsBlockComponents: Record<string, Component> = {`,
+    ...refs.map((ref) => `   ${JSON.stringify(ref.typeName)}: Lazy${ref.component},`),
+    `}`,
+    ``,
+    `export const cmsPreviewComponents: Record<string, Component> = {`,
+    ...previews.map((ref) => `   ${JSON.stringify(ref.entry)}: Lazy${ref.component},`),
+    `}`,
+    ``
+  );
+  return lines.join("\n");
+}
+
 async function collectMediaManifest(root) {
   const files = await scanMediaDirectory(root);
   return Promise.all(files.map((file) => readMediaFileMeta(root, file)));
@@ -92,9 +158,19 @@ const RESERVED_ENTRY_KEYS = [
   "cms_users"
 ];
 const RESERVED_COLUMNS = ["id", "status", "created_at", "updated_at"];
-const TITLE_FIELD_TYPES = ["text", "slug", "email", "number", "date", "select"];
+const TITLE_FIELD_TYPES = ["text", "slug", "email", "number", "date", "datetime", "select"];
 const TRANSLATABLE_FIELD_TYPES = ["text", "richtext", "media"];
-const CONDITION_FIELD_TYPES = ["select", "boolean", "text", "number", "date", "email", "slug"];
+const CONDITION_FIELD_TYPES = [
+  "select",
+  "boolean",
+  "text",
+  "number",
+  "date",
+  "datetime",
+  "email",
+  "slug"
+];
+const COMPONENT_RESERVED_KEYS = ["key", "ref", "class", "style"];
 const RESERVED_TYPE_NAMES = [
   "Query",
   "Mutation",
@@ -110,6 +186,7 @@ const RESERVED_TYPE_NAMES = [
 function validateConfig(config, i18n) {
   const errors = [];
   const locales = i18n?.locales ?? [];
+  normalizeContentEntries(config, { locales });
   if (locales.length && !locales.includes(i18n.defaultLocale)) {
     errors.push(
       `cms.i18n: defaultLocale '${i18n.defaultLocale}' is not in locales [${locales.join(
@@ -143,8 +220,10 @@ function validateConfig(config, i18n) {
     } else {
       entryIds.set(entry.id, name);
     }
-    if (entry.kind !== "collection" && entry.kind !== "single" && entry.kind !== "page")
-      errors.push(`${at}: kind must be 'collection', 'single' or 'page'`);
+    if (!["collection", "single", "page", "content"].includes(entry.kind))
+      errors.push(`${at}: kind must be 'collection', 'single', 'page' or 'content'`);
+    if (entry.kind === "content") errors.push(...contentErrors(at, entry));
+    else if (entry.preview !== void 0) errors.push(`${at}: preview needs kind 'content'`);
     if (entry.kind === "page") {
       if (pageEntry) {
         errors.push(
@@ -196,7 +275,7 @@ function validateConfig(config, i18n) {
       errors.push(`${at}: routes, include, exclude and overrides need kind 'page'`);
     }
     if (entry.kind !== "page" && entry.columns) errors.push(`${at}: columns need kind 'page'`);
-    if (entry.drafts && entry.kind !== "collection")
+    if (entry.drafts && !isCollectionKind(entry))
       errors.push(`${at}: drafts are only supported on collections`);
     const tabIds = /* @__PURE__ */ new Set();
     for (const tab of entry.tabs ?? []) {
@@ -237,8 +316,8 @@ function validateConfig(config, i18n) {
     const allFields = entry.kind === "page" ? pageAllFields(entry) : entry.fields ?? {};
     errors.push(...layoutErrors(at, allFields, entry.layout));
     errors.push(...listErrors(at, allFields, entry.list, entry.drafts ? ["status"] : []));
-    if (entry.list && entry.kind !== "collection")
-      errors.push(`${at}: list needs kind 'collection'`);
+    if (entry.list && !isCollectionKind(entry))
+      errors.push(`${at}: list needs kind 'collection' or 'content'`);
     if (entry.icon !== void 0 && (typeof entry.icon !== "string" || !entry.icon))
       errors.push(`${at}: icon must be a non-empty string`);
     const columnNames = /* @__PURE__ */ new Set();
@@ -321,7 +400,7 @@ function validateConfig(config, i18n) {
         if (!source) errors.push(`${fat}: slug source '${field.from}' is not a declared field`);
         else if (source.type !== "text")
           errors.push(`${fat}: slug source '${field.from}' must be a text field`);
-        else if (isTranslatableField(source))
+        else if (isTranslatableField(source) && !(entry.kind === "content" && key === CONTENT_SLUG_FIELD))
           errors.push(`${fat}: slug source '${field.from}' cannot be translatable`);
       }
       if (field.type === "blocks") {
@@ -335,6 +414,7 @@ function validateConfig(config, i18n) {
             errors.push(`${bat}: key must be a valid identifier`);
           if (!block.fields || !Object.keys(block.fields).length)
             errors.push(`${bat}: fields must not be empty`);
+          errors.push(...blockMetaErrors(bat, block));
           for (const [blockFieldKey, blockField] of Object.entries(block.fields ?? {})) {
             const bfat = `${bat}, field '${blockFieldKey}'`;
             if (!IDENTIFIER.test(blockFieldKey))
@@ -376,8 +456,10 @@ function validateConfig(config, i18n) {
         if (!field.to || !target) {
           errors.push(`${fat}: relation target '${field.to}' is not in the registry`);
         } else {
-          if (target.kind !== "collection")
-            errors.push(`${fat}: relation target '${field.to}' must be a collection`);
+          if (!isCollectionKind(target))
+            errors.push(
+              `${fat}: relation target '${field.to}' must be a collection or a content entry`
+            );
           if (!entry.table && target.table)
             errors.push(
               `${fat}: relation target '${field.to}' uses a custom table: derived relations can only target derived entries`
@@ -428,6 +510,51 @@ function validateConfig(config, i18n) {
   }
   return errors;
 }
+function contentErrors(at, entry) {
+  const errors = [];
+  const system = CONTENT_SYSTEM_FIELDS;
+  for (const key of entry.declared?.fields ?? []) {
+    if (system.includes(key))
+      errors.push(`${at}: '${key}' is a system field of content entries, remove it from fields`);
+  }
+  if (entry.declared?.titleField !== void 0)
+    errors.push(`${at}: content entries use 'title' as titleField, remove titleField`);
+  if (entry.declared?.drafts !== void 0)
+    errors.push(`${at}: content entries always have drafts, remove the drafts option`);
+  if (!entry.blocks || typeof entry.blocks !== "object" || !Object.keys(entry.blocks).length)
+    errors.push(`${at}: content entries need a non-empty blocks map for the body`);
+  if (entry.table) errors.push(`${at}: content entries cannot use a custom table`);
+  if (entry.preview !== void 0) {
+    const component = entry.preview?.component;
+    if (!entry.preview || typeof entry.preview !== "object")
+      errors.push(`${at}: preview must be an object`);
+    else if (component !== void 0 && (typeof component !== "string" || !component.trim()))
+      errors.push(`${at}: preview.component must be a non-empty string`);
+  }
+  for (const key of Object.keys(entry.labels ?? {})) {
+    if (!system.includes(key))
+      errors.push(`${at}: labels names '${key}', which is not a system field`);
+  }
+  return errors;
+}
+function blockMetaErrors(at, block) {
+  const errors = [];
+  if (block.component !== void 0) {
+    if (typeof block.component !== "string" || !block.component.trim())
+      errors.push(`${at}: component must be a non-empty string`);
+    for (const key of Object.keys(block.fields ?? {})) {
+      if (COMPONENT_RESERVED_KEYS.includes(key))
+        errors.push(
+          `${at}, field '${key}': '${key}' cannot be a prop of the block component, rename it`
+        );
+    }
+  }
+  if (block.icon !== void 0 && (typeof block.icon !== "string" || !block.icon))
+    errors.push(`${at}: icon must be a non-empty string`);
+  if (block.description !== void 0 && typeof block.description !== "string")
+    errors.push(`${at}: description must be a string`);
+  return errors;
+}
 function pageColumnsErrors(at, entry) {
   const errors = [];
   if (entry.table) errors.push(`${at}: page entries cannot use a custom table`);
@@ -525,7 +652,7 @@ function tableExpr(name, entry, dialect) {
     lines.push(columnExpr(key, field, dialect));
   }
   if (entry.drafts) lines.push(`  status: text('status').notNull().default('draft'),`);
-  if (entry.kind === "collection") lines.push(`  createdAt: ${nowExpr(pg, "created_at")},`);
+  if (isCollectionKind(entry)) lines.push(`  createdAt: ${nowExpr(pg, "created_at")},`);
   lines.push(`  updatedAt: ${nowExpr(pg, "updated_at")},`);
   return `export const ${name} = ${tableFn}('${name}', {
 ${lines.join("\n")}
@@ -638,13 +765,13 @@ ${[
 
 const MEDIA_SELECTION = "key url type alt folder mime size width height";
 function blocksSelection(entryName, key, field) {
-  const parts = ["type"];
+  const parts = ["__typename type"];
   for (const [blockName, block] of Object.entries(field.blocks ?? {})) {
     const fields = Object.entries(block.fields).map(
       ([blockFieldKey, blockField]) => blockField.type === "media" ? `${blockFieldKey} { ${MEDIA_SELECTION} }` : blockFieldKey
     );
     if (!fields.length) continue;
-    parts.push(`... on ${blockTypeName(entryName, key, blockName)} { ${fields.join(" ")} }`);
+    parts.push(`... on ${blockTypeName$1(entryName, key, blockName)} { ${fields.join(" ")} }`);
   }
   return parts.join(" ");
 }
@@ -669,7 +796,7 @@ function entrySelection(config, name, entry, withRelations, fields = entryFields
     }
     parts.push(key);
   }
-  if (entry.kind === "collection") parts.push("createdAt");
+  if (isCollectionKind(entry)) parts.push("createdAt");
   parts.push("updatedAt");
   return parts.join(" ");
 }
@@ -677,7 +804,7 @@ function singleQuery(config, name, entry) {
   const selection = entrySelection(config, name, entry, true);
   return `query CmsSingle($locale: String) { ${name}(locale: $locale) { ${selection} } }`;
 }
-function collectionQuery(config, name, entry) {
+function collectionQuery(config, name, entry, operation = "CmsCollection") {
   const selection = entrySelection(config, name, entry, true);
   const gqlType = typeName(name);
   const args = [
@@ -687,7 +814,14 @@ function collectionQuery(config, name, entry) {
     "$limit: Int",
     "$offset: Int"
   ].join(", ");
-  return `query CmsCollection(${args}) { ${name}(locale: $locale, filters: $filters, sort: $sort, limit: $limit, offset: $offset) { ${selection} } }`;
+  return `query ${operation}(${args}) { ${name}(locale: $locale, filters: $filters, sort: $sort, limit: $limit, offset: $offset) { ${selection} } }`;
+}
+function contentListQuery(config, name, entry) {
+  return collectionQuery(config, name, entry, "CmsContents");
+}
+function contentItemQuery(config, name, entry) {
+  const selection = entrySelection(config, name, entry, true);
+  return `query CmsContent($slug: String!, $locale: String) { item: ${name}BySlug(slug: $slug, locale: $locale) { ${selection} } }`;
 }
 function pageQuery(config, name, entry, path) {
   const selection = entrySelection(config, name, entry, true, pageFields(entry, path));
@@ -697,7 +831,18 @@ function renderQueriesFile(config) {
   const singles = [];
   const collections = [];
   const pages = [];
+  const contents = [];
+  const contentItems = [];
   for (const [name, entry] of Object.entries(config)) {
+    if (entry.kind === "content") {
+      contents.push(
+        `   ${JSON.stringify(name)}: ${JSON.stringify(contentListQuery(config, name, entry))},`
+      );
+      contentItems.push(
+        `   ${JSON.stringify(name)}: ${JSON.stringify(contentItemQuery(config, name, entry))},`
+      );
+      continue;
+    }
     if (entry.kind === "page") {
       for (const route of pageRoutes(entry)) {
         pages.push(
@@ -726,6 +871,14 @@ function renderQueriesFile(config) {
     `export const cmsPageQueries: Record<string, string> = {`,
     ...pages,
     `}`,
+    ``,
+    `export const cmsContentQueries: Record<string, string> = {`,
+    ...contents,
+    `}`,
+    ``,
+    `export const cmsContentItemQueries: Record<string, string> = {`,
+    ...contentItems,
+    `}`,
     ``
   ].join("\n");
 }
@@ -767,13 +920,17 @@ function fieldTsType(config, entryName, key, field) {
   const base = scalarTsType(field);
   return isRequiredField(field) ? base : `${base} | null`;
 }
+function blockPropsTypeName(entryName, fieldKey, blockName) {
+  return `${blockTypeName$1(entryName, fieldKey, blockName)}Props`;
+}
 function blockTypesTs(entryName, key, field) {
   const defs = [];
   const members = [];
   for (const [blockName, block] of Object.entries(field.blocks ?? {})) {
-    const name = blockTypeName(entryName, key, blockName);
+    const name = blockTypeName$1(entryName, key, blockName);
+    const props = blockPropsTypeName(entryName, key, blockName);
     members.push(name);
-    const lines = [`  __typename?: '${name}'`, `  type: '${blockName}'`];
+    const lines = [];
     for (const [blockFieldKey, blockField] of Object.entries(block.fields)) {
       if (blockField.type === "media") {
         lines.push(`  ${blockFieldKey}: ${mediaTsType(blockField)} | null`);
@@ -782,9 +939,15 @@ function blockTypesTs(entryName, key, field) {
       const base = scalarTsType(blockField);
       lines.push(`  ${blockFieldKey}: ${blockField.required ? base : `${base} | null`}`);
     }
-    defs.push(`export interface ${name} {
+    defs.push(`export interface ${props} {
 ${lines.join("\n")}
 }`);
+    defs.push(
+      `export interface ${name} extends ${props} {
+  __typename?: '${name}'
+  type: '${blockName}'
+}`
+    );
   }
   if (members.length)
     defs.push(`export type ${blocksFieldTypeName(entryName, key)} = ${members.join(" | ")}`);
@@ -797,7 +960,7 @@ function entryTs(config, name, entry) {
     if (isPrivateField(field)) continue;
     lines.push(`  ${key}: ${fieldTsType(config, name, key, field)}`);
   }
-  if (entry.kind === "collection") lines.push("  createdAt: string");
+  if (isCollectionKind(entry)) lines.push("  createdAt: string");
   lines.push("  updatedAt: string");
   return `export interface ${typeName(name)} {
 ${lines.join("\n")}
@@ -853,11 +1016,13 @@ ${lines.join("\n")}
 function entryMapsTs(config) {
   const singles = [];
   const collections = [];
+  const contents = [];
   const pages = [];
   for (const [name, entry] of Object.entries(config)) {
     const line = `  ${JSON.stringify(name)}: ${typeName(name)}Auto`;
     if (entry.kind === "single") singles.push(line);
     else if (entry.kind === "page") pages.push(...pageTypesTs(name, entry));
+    else if (entry.kind === "content") contents.push(line);
     else collections.push(line);
   }
   if (!pages.length) {
@@ -874,12 +1039,50 @@ ${singles.join("\n")}
 }`,
     `export interface CmsCollectionTypes {
 ${collections.join("\n")}
+}`,
+    `export interface CmsContentTypes {
+${contents.join("\n")}
 }`,
     `export type CmsSingleName = keyof CmsSingleTypes`,
     `export type CmsCollectionName = keyof CmsCollectionTypes`,
+    `export type CmsContentName = keyof CmsContentTypes`,
     ...pages
   ];
 }
+function blockPropsMapTs(config) {
+  const entries = [];
+  for (const [name, entry] of Object.entries(config)) {
+    const fields = [];
+    for (const [key, field] of Object.entries(entryFieldsFor(entry))) {
+      if (field.type !== "blocks" || isPrivateField(field)) continue;
+      const blocks = Object.keys(field.blocks ?? {}).map(
+        (blockName) => `      ${JSON.stringify(blockName)}: ${blockPropsTypeName(name, key, blockName)}`
+      );
+      if (blocks.length)
+        fields.push(`    ${JSON.stringify(key)}: {
+${blocks.join("\n")}
+    }`);
+    }
+    if (fields.length) entries.push(`  ${JSON.stringify(name)}: {
+${fields.join("\n")}
+  }`);
+  }
+  return [
+    `export interface CmsBlockPropTypes {
+${entries.join("\n")}
+}`,
+    `export type CmsBlockEntryName = [keyof CmsBlockPropTypes] extends [never]
+  ? string
+  : keyof CmsBlockPropTypes`,
+    [
+      `export type CmsBlockProps<`,
+      `  E extends keyof CmsBlockPropTypes,`,
+      `  F extends keyof CmsBlockPropTypes[E],`,
+      `  B extends keyof CmsBlockPropTypes[E][F],`,
+      `> = CmsBlockPropTypes[E][F][B]`
+    ].join("\n")
+  ];
+}
 function renderTypesFile(config) {
   const parts = [
     `export type CmsMediaType = 'image' | 'video' | 'file'`,
@@ -904,6 +1107,7 @@ function renderTypesFile(config) {
   }
   for (const [name, entry] of Object.entries(config)) parts.push(autoTypeTs(config, name, entry));
   parts.push(...entryMapsTs(config));
+  parts.push(...blockPropsMapTs(config));
   return `${parts.join("\n\n")}
 `;
 }
@@ -1007,6 +1211,10 @@ function resolveModuleOptions(options) {
     },
     graphql: {
       maxDepth: options.graphql?.maxDepth ?? 8
+    },
+    preview: {
+      path: options.preview?.path ?? DEFAULT_CMS_PREVIEW_PATH,
+      component: options.preview?.component?.trim() ?? ""
     }
   };
 }
@@ -1029,7 +1237,10 @@ async function loadCmsConfig(nuxt, resolver, configPathOption, i18n, logger) {
       moduleCache: false,
       alias: { "#nuxt-cms": resolver.resolve("./runtime/shared/index") }
     });
-    cmsConfig = expandMobileMedia(await jiti.import(configPath, { default: true }));
+    cmsConfig = normalizeCmsConfig(
+      await jiti.import(configPath, { default: true }),
+      i18n
+    );
   } else {
     logger.warn(
       `[nuxt-cms] Config file not found: ${configPath}. Using an empty registry. Create a ${configPathOption}.ts with defineCmsConfig().`
@@ -1052,12 +1263,12 @@ async function loadCmsConfig(nuxt, resolver, configPathOption, i18n, logger) {
     filename: "cms/config.ts",
     write: true,
     getContents: () => [
-      `import { expandMobileMedia } from '#nuxt-cms'`,
+      `import { normalizeCmsConfig } from '#nuxt-cms'`,
       `import config from '${source}'`,
       ``,
       `const pageRoutes = ${JSON.stringify(routesByEntry, null, 3)}`,
       ``,
-      `expandMobileMedia(config)`,
+      `normalizeCmsConfig(config, ${JSON.stringify({ locales: i18n.locales })})`,
       ``,
       `for (const [name, routes] of Object.entries(pageRoutes)) {`,
       `   const entry = Object(config)[name]`,
@@ -1126,7 +1337,7 @@ function addCmsTypeTemplates(nuxt, cmsConfig) {
       ``,
       `declare const graphql: CmsGraphql`,
       ``,
-      `// @ts-ignore: gql.tada's cache overload rejects this instantiation, but the parse overload still resolves`,
+      `// @ts-ignore`,
       `export type CmsDocument<Query extends string> = ReturnType<typeof graphql<Query, []>>`,
       ``,
       `export type CmsResult<Query extends string> = string extends Query`,
@@ -1141,6 +1352,31 @@ function addCmsTypeTemplates(nuxt, cmsConfig) {
   });
   nuxt.options.alias["#cms-graphql"] = graphqlTemplate.dst;
 }
+function addCmsBlocks(nuxt, resolver, cmsConfig, previewComponent) {
+  const refs = collectBlockComponents(cmsConfig);
+  const previews = collectPreviewComponents(cmsConfig, previewComponent);
+  const blocksTemplate = addTemplate({
+    filename: "cms/blocks.ts",
+    write: true,
+    getContents: () => renderBlocksFile(refs, previews)
+  });
+  nuxt.options.alias["#cms-blocks"] = blocksTemplate.dst;
+  addComponent({
+    name: "CmsBlocks",
+    filePath: resolver.resolve("./runtime/app/blocks/CmsBlocks.vue")
+  });
+  if (!refs.length && !previews.length) return;
+  nuxt.hook("components:extend", (components) => {
+    const names = components.map((component) => component.pascalName);
+    const errors = [
+      ...missingBlockComponents(refs, names),
+      ...missingPreviewComponents(previews, names)
+    ];
+    if (errors.length)
+      throw new Error(`[nuxt-cms] Invalid block components:
+${errors.join("\n")}`);
+  });
+}
 const module$1 = defineNuxtModule({
   meta: {
     name: "@xleddyl/nuxt-cms",
@@ -1192,17 +1428,25 @@ const module$1 = defineNuxtModule({
         { name: "$cmsQuery", from: queryStub },
         { name: "useCmsSingle", from: entryStub },
         { name: "useCmsCollection", from: entryStub },
-        { name: "useCmsPage", from: entryStub }
+        { name: "useCmsPage", from: entryStub },
+        { name: "useCmsContents", from: entryStub },
+        { name: "useCmsContent", from: entryStub }
       ]);
-      addCmsTypeTemplates(
+      const disabledConfig = await loadCmsConfig(
         nuxt,
-        await loadCmsConfig(nuxt, resolver, resolved.configPath, resolved.i18n, logger)
+        resolver,
+        resolved.configPath,
+        resolved.i18n,
+        logger
       );
+      addCmsTypeTemplates(nuxt, disabledConfig);
+      addCmsBlocks(nuxt, resolver, disabledConfig, resolved.preview.component);
       nuxt.options.runtimeConfig.public.cms = {
         mediaBaseUrl: resolved.media.publicBaseUrl,
         mediaStorage: resolved.media.storage,
         mediaMaxFileSize: resolved.media.maxFileSize,
-        i18n: resolved.i18n
+        i18n: resolved.i18n,
+        previewPath: resolved.preview.path
       };
       logger.info(
         "[nuxt-cms] disabled: registering no-op query composables and generated types, skipping admin, server and database setup"
@@ -1255,8 +1499,26 @@ const module$1 = defineNuxtModule({
       { name: "$cmsQuery", from: queryComposables },
       { name: "useCmsSingle", from: entryComposables },
       { name: "useCmsCollection", from: entryComposables },
-      { name: "useCmsPage", from: entryComposables }
+      { name: "useCmsPage", from: entryComposables },
+      { name: "useCmsContents", from: entryComposables },
+      { name: "useCmsContent", from: entryComposables }
     ]);
+    addCmsBlocks(nuxt, resolver, cmsConfig, resolved.preview.component);
+    const previewErrors = previewPathErrors(resolved.preview.path, Object.keys(cmsConfig));
+    if (previewErrors.length) throw new Error(`[nuxt-cms] ${previewErrors.join("\n")}`);
+    const previewPath = resolved.preview.path;
+    const previewRule = nuxt.options.routeRules?.[previewPath] ?? {};
+    nuxt.options.routeRules = {
+      ...nuxt.options.routeRules,
+      [previewPath]: {
+        ...previewRule,
+        headers: {
+          "x-robots-tag": "noindex, nofollow",
+          "x-frame-options": "SAMEORIGIN",
+          ...previewRule.headers
+        }
+      }
+    };
     const {
       driver,
       path: dbPath,
@@ -1433,7 +1695,8 @@ const module$1 = defineNuxtModule({
       mediaBaseUrl: resolved.media.publicBaseUrl,
       mediaStorage: resolved.media.storage,
       mediaMaxFileSize: resolved.media.maxFileSize,
-      i18n: resolved.i18n
+      i18n: resolved.i18n,
+      previewPath
     };
     addTypeTemplate(
       {
@@ -1484,14 +1747,38 @@ const module$1 = defineNuxtModule({
         name: "cms-admin",
         file: resolver.resolve("./runtime/app/layouts/cms-admin.vue")
       };
+      app.layouts["cms-editor"] = {
+        name: "cms-editor",
+        file: resolver.resolve("./runtime/app/layouts/cms-editor.vue")
+      };
     });
     addComponentsDir({ path: resolver.resolve("./runtime/app/components") });
     addRouteMiddleware({
       name: "cms-auth",
       path: resolver.resolve("./runtime/app/middleware/cms-auth")
     });
+    const contentPages = Object.entries(cmsConfig).filter(([, entry]) => entry.kind === "content").flatMap(([name]) => [
+      {
+        name: `cms-admin-content-${name}-new`,
+        path: `/cms/${name}/new`,
+        file: resolver.resolve("./runtime/app/pages/admin-content.vue"),
+        meta: { cmsEntry: name }
+      },
+      {
+        name: `cms-admin-content-${name}`,
+        path: `/cms/${name}/:id()`,
+        file: resolver.resolve("./runtime/app/pages/admin-content.vue"),
+        meta: { cmsEntry: name }
+      }
+    ]);
     extendPages((pages) => {
       pages.unshift(
+        {
+          name: "cms-preview",
+          path: previewPath,
+          file: resolver.resolve("./runtime/app/pages/admin-preview.vue")
+        },
+        ...contentPages,
         {
           name: "cms-admin",
           path: "/cms",