Custom Modules

Modules are top-level areas of the Data Studio, navigated to from the left-hand module bar. They will load at the specified routes.

The Data Studio splits up functionality into modules - the content module, the files module, the user module, the insights module, and the settings module. Extensions can add new modules to the Data Studio.

Module Entrypoint

The index.js or index.ts file exports an object that is read by Directus. It contains properties that control how a module is displayed in the module bar, the routes that exist within the module, and the actual Vue component that will be loaded.

Entrypoint Example

import { defineInterface } from '@directus/extensions-sdk'
import ModuleComponent from './module.vue';

export default defineInterface({
    id: 'custom',
    name: 'Custom',
    icon: 'box',
    routes: [
        {
            path: '',
            component: ModuleComponent,
        },
    ],
});

Properties

Route Object

The route object uses the same syntax as Vue Router, defining each route as an object.

The routes array should contain a root route with an empty path, which will load at the module's base route (the value of the module's id). Dynamic portions of the path can be defined using the :param syntax.

Route Component

The module route component will be rendered in the Data Studio when the route is accessed.

<template>
    <private-view title="My Custom Module">Content goes here...</private-view>
</template>

<script>
export default {};
</script>

You can use the globally-registered private-view component to get access to Directus' page structure consisting of the module bar, navigation, sidebar, header, and the main content area. Named slots can be used to add additional content to these areas.