tessl/npm-nuxt--content

File-based content management system for Nuxt.js applications with powerful querying and Vue component rendering in Markdown

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Nuxt Content

Name: tessl/npm-nuxt--content
Author: tessl

Nuxt Content is a comprehensive content management module for Nuxt.js applications that enables developers to build file-based content systems with powerful querying capabilities. It reads content from directories containing Markdown, YAML, CSV, or JSON files and creates a data layer with full TypeScript support, Vue component rendering in Markdown through MDC syntax, and blazing-fast hot module replacement during development.

Package Information

Package Name: @nuxt/content
Package Type: npm
Language: TypeScript
Installation: npm install @nuxt/content

Core Imports

import { queryCollection, queryCollectionNavigation } from '#content/composables';
import { ContentRenderer } from '#content/components';

For direct module imports:

import { defineCollection, defineContentConfig, defineTransformer, z } from '@nuxt/content/utils';
import { findPageBreadcrumb, findPageChildren, findPageSiblings, findPageHeadline } from '@nuxt/content/utils';
import { field, group } from '@nuxt/content/preview';
import { compressTree, decompressTree, visit } from '@nuxt/content/runtime';

Basic Usage

// In pages/[...slug].vue or other composables
export default defineComponent({
  async setup() {
    // Query a single content item
    const article = await queryCollection('articles')
      .path('/blog/my-article')
      .first();

    // Query multiple items with filtering
    const posts = await queryCollection('blog')
      .where('published', '=', true)
      .order('date', 'DESC')
      .limit(10)
      .all();

    // Generate navigation from content
    const nav = await queryCollectionNavigation('pages');

    return { article, posts, nav };
  }
})

<template>
  <!-- Render content with full MDC support -->
  <ContentRenderer :value="article" />
</template>

Architecture

Nuxt Content is built around several key architectural components:

Collections: Type-safe content organization with flexible schemas and custom sources
Query Engine: SQLite-based query builder with fluent API for filtering, sorting, and pagination
Content Pipeline: Build-time processing with transformers, validation, and hot module replacement
MDC Renderer: Vue component rendering within Markdown with full TypeScript support
Database Layer: Flexible database adapters supporting SQLite, D1, PostgreSQL, and LibSQL
Preview System: Live content editing with authentication and real-time updates

Capabilities

Content Querying

Powerful query system with fluent API for filtering, sorting, and retrieving content from collections. Includes full TypeScript support and SQLite-based performance.

function queryCollection<T>(collection: T): CollectionQueryBuilder<Collections[T]>;

interface CollectionQueryBuilder<T> {
  path(path: string): CollectionQueryBuilder<T>;
  select<K>(...fields: K[]): CollectionQueryBuilder<Pick<T, K>>;
  where(field: string, operator: SQLOperator, value?: unknown): CollectionQueryBuilder<T>;
  order(field: keyof T, direction: 'ASC' | 'DESC'): CollectionQueryBuilder<T>;
  limit(limit: number): CollectionQueryBuilder<T>;
  skip(skip: number): CollectionQueryBuilder<T>;
  all(): Promise<T[]>;
  first(): Promise<T | null>;
  count(field?: keyof T | '*', distinct?: boolean): Promise<number>;
}

Content Querying

Navigation Generation

Automatically generate navigation trees and hierarchical structures from your content collections with customizable field selection and filtering.

function queryCollectionNavigation<T>(
  collection: T, 
  fields?: Array<keyof PageCollections[T]>
): ChainablePromise<T, ContentNavigationItem[]>;

interface ContentNavigationItem {
  title: string;
  path: string;
  stem?: string;
  children?: ContentNavigationItem[];
  page?: false;
  [key: string]: unknown;
}

Navigation

Content Rendering

Vue component system for rendering content with MDC (Markdown Components) support, custom component mapping, and prose styling.

interface ContentRendererProps {
  value: object;
  excerpt?: boolean;
  tag?: string;
  components?: object;
  data?: object;
  prose?: boolean;
  class?: string | object;
  unwrap?: boolean | string;
}

Content Rendering

Collection Configuration

Type-safe collection definition system with schema validation, custom sources, and flexible content organization.

function defineCollection<T>(collection: Collection<T>): DefinedCollection;
function defineContentConfig(config: ContentConfig): ContentConfig;

interface Collection<T> {
  type: 'page' | 'data';
  source?: string | CustomCollectionSource;
  schema?: ZodSchema<T>;
  fields?: CollectionFields<T>;
}

Collections

Module Configuration

Comprehensive module configuration with database settings, preview mode, build options, and experimental features.

interface ModuleOptions {
  database: DatabaseConfig;
  preview: PreviewOptions;
  watch: WatchOptions;
  renderer: RendererOptions;
  build: BuildOptions;
  experimental: ExperimentalOptions;
}

Module Configuration

Preview System

Live content editing system with field definitions, authentication, and real-time preview capabilities.

function field(config: FieldConfig): PreviewField;
function group(config: GroupConfig): PreviewGroup;

interface PreviewField {
  type: PickerTypes;
  name: string;
  label?: string;
  required?: boolean;
}

Preview System

Navigation Utilities

Helper functions for working with navigation trees, extracting breadcrumbs, children, siblings, and headlines from hierarchical content structures.

function findPageBreadcrumb(
  navigation?: ContentNavigationItem[], 
  path?: string | undefined | null, 
  options?: FindPageBreadcrumbOptions
): ContentNavigationItem[];

function findPageChildren(
  navigation?: ContentNavigationItem[], 
  path?: string | undefined | null, 
  options?: FindPageOptions
): ContentNavigationItem[];

function findPageSiblings(
  navigation?: ContentNavigationItem[], 
  path?: string | undefined | null, 
  options?: FindPageOptions
): ContentNavigationItem[];

function findPageHeadline(
  navigation?: ContentNavigationItem[], 
  path?: string | undefined | null, 
  options?: FindPageOptions
): string | undefined;

Navigation Utilities

Runtime Utilities

Low-level utilities for working with content trees, compression, and AST manipulation for advanced content processing scenarios.

function compressTree(input: MDCRoot): MinimarkTree;
function decompressTree(input: Tree): MDCRoot;
function visit(
  tree: Tree, 
  checker: (node: Node) => boolean, 
  visitor: (node: Node) => Node | undefined
): void;

Runtime Utilities

Types

type SQLOperator = '=' | '!=' | '>' | '<' | '>=' | '<=' | 'IN' | 'NOT IN' | 'LIKE' | 'NOT LIKE';

interface Collections {
  [key: string]: CollectionType;
}

interface PageCollections {
  [key: string]: PageCollectionType;
}

interface ChainablePromise<T, R> extends Promise<R> {
  collection: T;
}

interface FindPageBreadcrumbOptions {
  current?: boolean;
  indexAsChild?: boolean;
}

interface FindPageOptions {
  indexAsChild?: boolean;
}

interface MDCRoot {
  type: 'root';
  children: Node[];
}

interface MinimarkTree {
  type: 'minimark';
  value: unknown;
}

interface Tree {
  type: string;
  value?: unknown;
}

interface Node {
  type: string;
  [key: string]: unknown;
}

Install with Tessl CLI