Explore Layouts

Layouts allow for listing of items in Explore pages.

Layouts receive a collection, filters, searches, and any custom layout options that are defined in the layout entrypoint. They are then expected to fetch and render the items from a collection.

Layout Entrypoint

The index.js or index.ts file exports an object that is read by Directus. It contains properties that control how a layout is displayed within menus, which options are available, optional slots, and the actual Vue component that will be loaded.

Entrypoint Example

import { ref } from 'vue';
import { defineInterface } from '@directus/extensions-sdk'
import LayoutComponent from './layout.vue';

export default defineInterface({
    id: 'custom',
    name: 'Custom',
    icon: 'box',
    component: LayoutComponent,
    slots: {
        options: () => null,
        sidebar: () => null,
        actions: () => null,
    },
    setup() {
        const name = ref('Custom Layout');
        return { name };
    },
});

Properties

The actions slot is used to render additional buttons at the top of the layout by the search bar. It is commonly used to add additional buttons or display metadata about the layout.

Layout Component

The layout component is a Vue component that will be rendered in the Data Studio within Explore pages.

Component Example

<template>
    <div>
        <p>Name: {{ name }}</p>
        <p>Collection: {{ collection }}</p>
    </div>
</template>

<script>
export default {
    inheritAttrs: false,
    props: {
        collection: {
            type: String,
            required: true,
        },
        name: {
            type: String,
            required: true,
        },
    },
};
</script>

Props

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

Emits

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