Editor Interfaces

Interfaces are form inputs used primarily inside of the :product-link{product="editor"}.

Interfaces are the primary way users interact with data inside of Directus. Custom interfaces can be used for use cases with unique interaction needs, complex data entry, and any time you need to add elements to the editor.

:partial{content="extensions-app"}

Interface Entrypoint

The index.js or index.ts file exports an object that is read by Directus. It contains properties that control how an interface is displayed within menus, it’s what types it supports, what configurable options will be available to users, and the actual Vue component that will be loaded.

Entrypoint Example

import { defineInterface } from '@directus/extensions-sdk'
import InterfaceComponent from './interface.vue';

export default defineInterface({
	id: 'custom',
	name: 'Custom',
	icon: 'box',
	description: 'This is my custom interface!',
	component: InterfaceComponent,
	types: ['string'],
	options: [
		{
			field: 'text',
			name: 'Text',
			type: 'string',
			meta: {
				interface: 'input',
				width: 'full',
			}
		},
	],
});

Properties

:partial{content="extensions-uid"}

:partial{content="extensions-theme"}

Interface Component

The interface component is a Vue component that will be rendered in the Data Studio within the Editor. 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>
	<input :value="value" @input="handleChange($event.target.value)" />
	<span>{{ text }}</span>
</template>

<script setup>
defineProps(['text', 'value']);
const emit = defineEmits(['input']);

function handleChange(value) {
  emit('input', value);
}
</script>

The current value of the field is provided to the component via the value prop. If the value was changed inside your component, it should be emitted to the Directus Editor by using the input emit.

Props

The interface component will be passed all user configuration options from the entrypoint file. It will also receive the following props:

Emits

The interface component can emit the following events that will be recognized by Directus.

:partial{content="extensions-app-internals"}