Skip to content

API reference


The following composables are available for frontend development.


setCollectivoTitle(title: string)

Use in a page to set a page title for both the visible header and the metadata.


useDirectus(): DirectusClient

Access the directus client to interact with the database.


useCollectivoUser(): UserStore

Store for data of the currently authenticated user, with the following attributes:

  • data: CollectivoUser | null
  • inputs: CollectivoUserInput[] -> Can be used to add fields to the profile section
  • isAuthenticated: boolean
  • saving: boolean
  • loading: boolean
  • error: unknown
  • load: (force: boolean = false) => Promise<UserStore> -> Fetch user data
  • save: (data: CollectivoUser) => Promise<UserStore> -> Update user data


useCollectivoMenus(): Ref<CollectivoMenus>

This composable can be used to add or adapt menu items.

There are four menus in CollectivoMenus:

  • main: Left sidebar, shown for authenticated users.
  • main_public: Left sidebar, shown for public users.
  • profile: Top right profile icon, shown for authenticated users.
  • profile_public: Top right profile icon, shown for public users.


  • label: string - Will be shown next to the icon.
  • icon: string - Icon to be used (see icons)
  • to: string - A path like /my/path or
  • external: boolan - If true, path will be interepreted as an external URL.
  • hideOnMobile: boolean - If true, item will not be shown on small screens.
  • target: string - Target attribute of the link.
  • click: Function - Click attribute of the link.
  • filter: (item: CollectivoMenuItem) => boolean - Show item only if this function returns true.


This component can be used to build forms.


  • data: Record<string, any>: Data to populate the initial form
  • fields: CollectivoFormField[]: Defines the structure of the form
  • submit: (data: Record<string, any>) => Promise<void>: Function to be called when form is submitted
  • submit-label: string: Label of the submit button

To see the different possible form fields, check out the available types of CollectivoFormField in index.d.ts.


The following utility functions can be used for server-side scripts (within /my-extension/server/)


registerExtension({name: string, description:string, version:string, schemas:ExtensionSchema[], examples: ()=>Promise<void>})

Registers a function within the runtime of the backend server, being able to multiple schemas for different versions of the extension as well as a function to create example data.


initSchema(extension: string, version: string, options: ExtensionSchemaOptions): ExtensionSchema

Initiates a new ExtensionSchema that can be used to define the database structure and migrations of your extension (see migrations). Can be applied as follows and added to registerExtension.


This class has the following attributes:

And the following methods:

  • createO2MRelation() - Utility method to create a One-to-Many relationship
  • createM2MRelation() - Utility method to create a Many-to_many relationship
  • createM2ARelation() - Utility method to create a Many-to-Any relationship
  • createNuxtHook() - Utility method to create a flow that will send a post request to a Nuxt API endpoint when it is triggered.


This type can be used to define dependencies of a schema on another extension.


  • extension: String. The extension that the schema depends on.
  • version: String. The semantic version of the extension that the schema depends on.


This type can be used to construct directus flows in a schema.


  • flow: Partial<DirectusFlow<<any>> - this will define the trigger, see directus flow
  • firstOperation: string - key of the initial operation to be performed
  • operations: DirectusOperationWrapper[] - define a list of connected operations


This type can be used to define operations within DirectusFlowWrapper.


  • operation: Partial<DirectusOperation<<any>> - see directus operation
  • resolve: string - key of the operation to execute when this one is resolved
  • reject: string - key of the operation to execute when this one is rejected


useDirectusAdmin(): DirectusClient

Access the directus client with admin access.


Function to protect API endpoints. Requests need to attach the API token from .env in the authorization header.


You can use winston to write information to the nuxt logs (console.log will not appear in production), e.g.:"Hello world!");