Modules

content/10.extensions/4.app-extensions/5.modules.md

@@ -2,4 +2,87 @@
 description:
 ---
 
-# New Modules
+# 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.
+
+<!-- TODO: Image -->
+
+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.
+
+::callout{type="info" title="Enable the Module"}
+
+For the module to appear in the module bar, the extension has to be enabled in your main project settings.
+
+::
+
+:partial{content="extensions-app"}
+
+## 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
+
+```js
+import ModuleComponent from './module.vue';
+
+export default {
+	id: 'custom',
+	name: 'Custom',
+	icon: 'box',
+	routes: [
+		{
+			path: '',
+			component: ModuleComponent,
+		},
+	],
+};
+```
+
+### Properties
+
+| Property           | Type     | Description                                                                                                                                                                |
+|--------------------|----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `id`               | string   | A unique identifier for this extension.                                                                    |
+| `name`             | string   | The displayed name for this panel in the Data Studio.                                                                                                                                   |
+| `icon`             | string   | An icon name from the [Google Material Icons set](https://fonts.google.com/icons). Supports filled and outlined variants.                                    |
+| `color`            | string   | A color associated with the module.                                                                                                                                        |
+| `routes`           | array    | List of routes in the module. The routes are registered as nested routes with the module's `id` serving as the base path.                                            |
+| `hidden`           | boolean  | A boolean that indicates if the module should be hidden from the module bar.                                                                                               |
+| `preRegisterCheck` | function | A function that receives the current user as the first parameter and the permissions of this user as the second parameter. It should return a boolean indicating success. |
+
+:partial{content="extensions-uid"}
+
+### Route Object
+
+The route object uses the same syntax as Vue Router, defining each route as an object.
+
+| Property    | Description                                                                                                                                                                                                |
+|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `path`      | The route path without the leading slash.                                                                                                                                                                  |
+| `component` | A Vue component to be rendered for this route.                                                                                                                                                             |
+
+
+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.
+
+```vue
+<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.
+
+<!-- TODO: Document slots -->
+
+:partial{content="extensions-app-internals"}