Displays | Directus Docs

Displays are small components that are used to display a single value throughout the Data Studio.

Displays receive a single value and any custom display options that are defined in the display entrypoint. They are then expected to render the value in a user-friendly way.

A Datetime display in the content module

This extension type is loaded into the Directus Data Studio. They are are built with Vue 3, and can use the provided composables exported by the @directus/extensions-sdk package. Extensions can be written in JavaScript or TypeScript.

Display Entrypoint

The index.js or index.ts file exports an object that is read by Directus. It contains properties that control how a display is displayed throughout the Data Studio, which options are available, and the actual Vue component that will be loaded.

Entrypoint Example

import { defineInterface } from '@directus/extensions-sdk'
import DisplayComponent from './display.vue';

export default defineInterface({
    id: 'custom',
    name: 'Custom',
    icon: 'box',
    description: 'This is my custom display!',
    component: DisplayComponent,
    options: null,
    types: ['string'],
});

Properties

Property	Type	Description
`id`	string	A unique identifier for this extension.
`name`	string	The displayed name for this layout in the Data Studio.
`icon`	string	An icon name from the Google Material Icons set. Supports filled and outlined variants.
`description`	string	A description of this display shown in the Data Studio. Maximum 80 characters.
`component`	component	A reference to your display component.
`options`	object \| component	The options of your display. Can be either an options object or a dedicated Vue component.
`types`	array	All types supported by the display.
`localTypes`	array	All local types supported by this display. Accepts `standard`, `file`, `files`, `m2o`, `o2m`, `m2m`, `m2a`, `presentation`, `translations` and `group`. Defaults to `standard`.
`fields`	array \| function	If this option is set, the display will fetch relational fields. Can either be an array of fields or a function that returns an array of fields.

Unique Identifiers
The extension id must not conflict with other extensions, so consider prefixing with author name.

Display Component

The display component is a Vue component that will be rendered in the Data Studio whenever your display is used to show the value of a field. Data from the entrypoint are passed in as props.

Component Example

This example assumes there is an item in the entrypoint’s options array with a field value of url.

<template>
    <div>Value: {{ value }}</div>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: null,
        },
    },
};
</script>

The current value of the field is provided to the component via the value prop. If you use the fields option to fetch relational fields, the value prop will be an object with the requested fields as keys and their respective values.

Props

Prop	Type	Description
`value`	any	The value of the field.
`interface`	string	The interface of the field.
`interfaceOptions`	object	The options for the field's interface.
`type`	string	The type of the field.
`collection`	string	The collection name of the field.
`field`	string	The key of the field.

Functional Component

Instead of defining the component inside a separate Vue file, you can use a functional component. This allows you to make small displays that don't need a full component.

import { defineInterface } from '@directus/extensions-sdk'

export default defineInterface({
    id: 'custom',
    name: 'Custom',
    icon: 'box',
    description: 'This is my custom display!',
    component: function ({ value }) {
        return value.toLowerCase();
    },
    options: null,
    types: ['string'],
});

Using Directus Internals

To access internal systems like the API or the stores in app extensions, you can use the useApi() and useStores() composables exported by the @directus/extensions-sdk package.

Learn more about using Directus composables.

Directus UI components are globally registered, making them accessible throughout your extension without the need to import them.

Learn more about using the Directus UI library.

Using External APIs

To avoid Cross Site Request Forgery (CSRF), app extensions cannot make requests to external servers by default. A common approach to achieve this is to create a bundle containing an endpoint that makes the external request, and an app extension that uses the now-internal endpoint to retrieve data.

Learn more about building extensions through our tutorials.

Editor Interfaces

Interfaces are form inputs used primarily inside of the Directus Editor.

Explore Layouts

Layouts are used to display a list of items in Explore pages in different ways.

Inline Displays