Вы устали от ограничений стандартного интерфейса Directus? Когда нужно реализовать нестандартный дашборд с кастомной вёрсткой, уникальными кнопками или сложной бизнес-логикой, стандартные экраны CRUD не помогают. Мы специализируемся на разработке кастомных модулей Directus — полноценных Vue 3 страниц, которые интегрируются в админку как родные. Наш опыт: более 30 проектов, от ритейла до логистики, где именно кастомные модули решили проблемы, недоступные стандартным расширениям.
Directus предоставляет мощный API и SDK для создания Module Extensions. Это не просто виджеты, а полноценные страницы с собственными маршрутами и иконками в боковом меню. Мы используем Vue 3 и TypeScript, чтобы каждый модуль был гибким, производительным и легко поддерживаемым. Например, кастомный дашборд может агрегировать данные из нескольких коллекций, отображать интерактивные графики и предоставлять массовые операции, недоступные в стандартных дашбордах.
Средняя экономия времени при использовании кастомного модуля вместо ручного сбора данных составляет до 70%. Наша команда разработала Directus extension для крупного интернет-магазина, который автоматизировал формирование отчётов для отдела закупок. Результат: сокращение времени на подготовку отчётов с 5 часов до 30 минут. Это лишь один из 30+ модулей, которые мы внедрили за последние годы.
Как создать модуль шаг за шагом?
- Инициализация: выполните команду
npx create-directus-extension@latest, выберите типmoduleи укажите имя, напримерsales-dashboard. - Структура: сгенерируется шаблон с
src/index.ts(регистрация) иsrc/module.vue(основной компонент). - Регистрация: в
index.tsэкспортируйте объект сid,name,iconи массивомroutes. Каждый маршрут указывает на компонент; можно добавить дочерние пути с динамическими параметрами. - Разработка: в
module.vueиспользуйте Vue 3 Composition API, хукиuseApi()иuseRouter()из@directus/extensions-sdk. Добавьте пользовательский интерфейс с помощью компонентов Directus (v-button,v-table,v-iconи др.). - Сборка и деплой: соберите модуль в NPM-пакет или скопируйте папку в
extensionsвашего Directus-проекта. После перезагрузки админ-панели модуль появится в навигации.
Почему кастомный модуль лучше стандартной интеграции?
Стандартные экраны Directus хороши для CRUD, но когда нужна сложная бизнес-логика — уникальные отчёты, интерактивные дашборды, связь с внешними сервисами — возможностей не хватает. Кастомный модуль даёт полный контроль над HTML, CSS и логикой, при этом оставаясь частью единой админ-панели.
| Критерий | Кастомный модуль | Стандартные средства |
|---|---|---|
| Гибкость UI | Полная свобода вёрстки (Vue 3) | Ограничен шаблонами |
| Интеграция с API | Прямой доступ к useApi() |
Через встроенные экраны |
| Сложность бизнес-логики | Любая сложность | Только CRUD |
| Время разработки | 2–4 дня | 0 (если подходит) |
Какие типы модулей можно создать?
Модули могут быть совершенно разными: от простых дашбордов до полноценных бизнес-инструментов. Среди реализованных нами: дашборды с аналитикой, панели управления заказами, кастомные редакторы контента и интеграционные интерфейсы с внешними API.
В нашей практике был кейс: интернет-магазину потребовался внутренний дашборд для отдела закупок. Стандартные экраны Directus не позволяли объединить заказы от поставщиков, складские остатки и прогнозы продаж. Мы разработали кастомный модуль с тремя вкладками: «Заказы», «Поставщики», «Аналитика». Модуль подтягивает данные из коллекций Directus, отображает их в кастомных таблицах с возможностью массового редактирования и экспорта в Excel. Внедрение заняло 4 дня, после чего отдел закупок сократил время на формирование отчётов на 70%.
"Module extensions give you complete control over the user interface and business logic of your admin panel." — Directus Documentation
Процесс разработки
| Этап | Длительность | Результат |
|---|---|---|
| Аналитика и проектирование | 1–2 дня | Техническое задание, прототип UI |
| Разработка модуля | 2–4 дня | Рабочий модуль с интеграцией API |
| Тестирование и доработка | 1–2 дня | QA, исправление ошибок |
| Деплой и документация | 1 день | Развёртывание, инструкция |
Что входит в работу
- Исходный код модуля (TypeScript, Vue 3)
- Интеграция с API Directus (коллекции, кастомные эндпоинты)
- Адаптивный UI с использованием Directus UI-кита
- Документация по установке и настройке
- Гарантия на модуль 6 месяцев (исправление ошибок, консультации)
Пример кода дашборда (нажмите, чтобы развернуть)
<!-- src/module.vue -->
<template>
<private-view title="Sales Dashboard">
<template #headline>Аналитика продаж</template>
<template #title-outer:prepend>
<v-button rounded icon secondary @click="refresh">
<v-icon name="refresh" />
</v-button>
</template>
<template #actions>
<v-button @click="exportData">
<v-icon name="download" left />
Экспорт
</v-button>
</template>
<div class="dashboard-grid">
<div class="stat-card" v-for="stat in stats" :key="stat.label">
<div class="stat-value">{{ stat.value }}</div>
<div class="stat-label">{{ stat.label }}</div>
<div class="stat-change" :class="stat.change > 0 ? 'positive' : 'negative'">
{{ stat.change > 0 ? '+' : '' }}{{ stat.change }}%
</div>
</div>
</div>
<div class="orders-table">
<v-table
:headers="headers"
:items="orders"
:loading="loading"
show-resize
@click:row="openOrder"
/>
</div>
</private-view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useApi, useRouter } from '@directus/extensions-sdk'
const api = useApi()
const router = useRouter()
const loading = ref(true)
const stats = ref<any[]>([])
const orders = ref<any[]>([])
const headers = [
{ text: 'ID', value: 'id', width: 80 },
{ text: 'Клиент', value: 'customer_email' },
{ text: 'Сумма', value: 'total', width: 120 },
{ text: 'Статус', value: 'status', width: 120 },
{ text: 'Дата', value: 'date_created', width: 160 },
]
async function fetchData() {
loading.value = true
try {
const [ordersRes, statsRes] = await Promise.all([
api.get('/items/orders', {
params: {
sort: '-date_created',
limit: 50,
fields: ['id', 'customer_email', 'total', 'status', 'date_created'],
},
}),
api.get('/custom/reports/sales'),
])
orders.value = ordersRes.data.data
stats.value = [
{ label: 'Заказов сегодня', value: statsRes.data.today, change: statsRes.data.todayChange },
{ label: 'Выручка месяц', value: `${statsRes.data.monthRevenue.toLocaleString()} ₽`, change: statsRes.data.revenueChange },
]
} finally {
loading.value = false
}
}
function openOrder({ item }: { item: any }) {
router.push(`/sales-dashboard/${item.id}`)
}
async function exportData() {
const response = await api.post('/custom/reports/export', {
collection: 'orders',
format: 'csv',
}, { responseType: 'blob' })
const url = URL.createObjectURL(new Blob([response.data]))
const a = document.createElement('a')
a.href = url
a.download = 'orders.csv'
a.click()
}
function refresh() { fetchData() }
onMounted(fetchData)
</script>
<style scoped>
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 24px; }
.stat-card { background: var(--background-page); border: 1px solid var(--border-normal); border-radius: 8px; padding: 16px; }
.stat-value { font-size: 28px; font-weight: 700; }
.stat-label { color: var(--foreground-subdued); font-size: 13px; }
.positive { color: var(--success); }
.negative { color: var(--danger); }
.orders-table { padding: 0 24px 24px; }
</style>
Типичные ошибки при разработке модулей
- Неиспользование
private-view— приводит к ломке навигации. - Отсутствие обработки ошибок API — молчаливый сбой.
- Жёсткая привязка к конкретной версии Directus — используйте актуальный SDK.
- Игнорирование темизации — цвета и шрифты должны соответствовать админке.
Сроки и стоимость
Разработка кастомного модуля занимает от 2 до 4 дней для дашборда с таблицами и экспортом. Стоимость рассчитывается индивидуально в зависимости от сложности UI и количества интеграций. Свяжитесь с нами — оценим ваш проект за один день.
Наша команда имеет более 5 лет опыта с Directus и более 30 успешных кейсов. Закажите разработку под ключ с гарантией 6 месяцев и получите консультацию уже сегодня.