or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli.mdcomposables.mdextensions.mdindex.mdutilities.md
tile.json

index.mddocs/

Directus Extensions SDK

The Directus Extensions SDK is a comprehensive toolkit for developing extensions to extend Directus CMS. It provides TypeScript-based APIs for creating various extension types, Vue composables for common functionality, and a CLI for scaffolding, building, and managing extensions.

Package Information

  • Package Name: @directus/extensions-sdk
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @directus/extensions-sdk

Core Imports

import {
  // Composables for app context
  useApi, useSdk, useStores, useExtensions,
  useCollection, useItems, useLayout, useFilterFields, useSync,
  
  // Extension definition functions
  defineDisplay, defineEndpoint, defineHook, defineInterface,
  defineLayout, defineModule, defineOperationApi, defineOperationApp,
  definePanel, defineTheme,
  
  // Utility functions
  getFieldsFromTemplate, getRelationType
} from '@directus/extensions-sdk';

For CLI usage:

npx directus-extension <command> [options]

Basic Usage

Create a new display extension:

npx directus-extension create display my-custom-display

Define a display extension:

import { defineDisplay } from '@directus/extensions-sdk';

export default defineDisplay({
  id: 'my-display',
  name: 'My Display',
  icon: 'box',
  component: MyDisplayComponent,
});

Use composables in your extension:

import { useApi, useStores } from '@directus/extensions-sdk';

export default {
  setup() {
    const api = useApi();
    const { useCollectionsStore } = useStores();
    const collectionsStore = useCollectionsStore();
    
    // Use the Directus API and stores
    return { api, collections: collectionsStore.collections };
  }
};

Architecture

The Extensions SDK is built around several key components:

  • Composables: Vue composables that provide access to Directus app context (API, stores, collections, etc.)
  • Extension Definitions: Type-safe functions for defining each extension type with proper configuration
  • CLI Tools: Command-line interface for creating, building, and managing extensions
  • Build System: Rollup-based bundling with optimized configurations for different extension types
  • Templates: Pre-built templates for all extension types in JavaScript and TypeScript

Capabilities

Vue Composables

Access to Directus app context including API client, stores, and utility functions. Essential for building extensions that integrate with the Directus admin interface.

function useApi(): AxiosInstance;
function useSdk<Schema extends object = any>(): DirectusClient<Schema> & RestClient<Schema>;
function useStores(): RefRecord<any>;
function useExtensions(): RefRecord<AppExtensionConfigs>;

Vue Composables

Extension Definitions

Type-safe functions for defining different types of Directus extensions. Each function provides proper TypeScript support and validation for extension configurations.

function defineDisplay<Custom extends CustomConfig<DisplayConfig>>(
  config: ExtendedConfig<DisplayConfig, Custom>
): ExtendedConfig<DisplayConfig, Custom>;

function defineInterface<Custom extends CustomConfig<InterfaceConfig>>(
  config: ExtendedConfig<InterfaceConfig, Custom>
): ExtendedConfig<InterfaceConfig, Custom>;

function defineModule<Custom extends CustomConfig<ModuleConfig>>(
  config: ExtendedConfig<ModuleConfig, Custom>
): ExtendedConfig<ModuleConfig, Custom>;

Extension Definitions

CLI Commands

Command-line interface for extension development workflow including creating, building, validating, and linking extensions.

directus-extension create <type> <name> [options]
directus-extension build [options]
directus-extension add [options]
directus-extension validate [options]
directus-extension link <path>

CLI Commands

Utility Functions

Helper functions for working with Directus data structures and templates.

function getFieldsFromTemplate(template?: string | null): string[];
function getRelationType(): string;

Utility Functions