Custom Modules

Custom Modules are completely open-ended components that allow you to create new experiences within the Directus platform. Learn more about Modules.

1. Setup the Boilerplate

Every module is a standalone "package" that contains at least a metadata file and a Vue component. We recommend using the following file structure:

src/
	index.js
	module.vue

src/index.js

import ModuleComponent from './module.vue';

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

id — The unique key for this module. It is good practice to scope proprietary interfaces with an author prefix.
name — The human-readable name for this module.
icon — An icon name from the material icon set, or the extended list of Directus custom icons.
routes — Details the routes in your module per the Vue router.

::: tip TypeScript

See the TypeScript definition for more info on what can go into this object.

:::

src/module.vue

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

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

Available Props

If you setup a route with a parameter, you can pass it in as a prop.

2. Install Dependencies and Configure the Buildchain

Set up a package.json file by running:

npm init -y

To be read by the Admin App, your custom module's Vue component must first be bundled into a single index.js file. We recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:

npm i -D rollup rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-terser rollup-plugin-vue@5.0.0 @vue/compiler-sfc rollup-plugin-vue@next

You can then use the following Rollup configuration within rollup.config.js:

import { terser } from 'rollup-plugin-terser';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import vue from 'rollup-plugin-vue';

export default {
	input: 'src/index.js',
	output: {
		format: 'es',
		file: 'dist/index.js',
	},
	plugins: [terser(), resolve(), commonjs(), vue()],
};

::: tip Building multiple extensions

You can export an array of build configurations, so you can bundle (or even watch) multiple extensions at the same time. See the Rollup configuration file documentation for more info.

:::

3. Develop Your Custom Module

The module itself is simply a Vue component, which provides an blank canvas for creating anything you need.

4. Build and Deploy

To build the module for use within Directus, run:

npx rollup -c

Finally, move the output from your module's dist folder into your project's /extensions/modules/my-custom-module folder. Keep in mind that the extensions directory is configurable within your env file, and may be located elsewhere.

3.1 KiB Raw Blame History