Разработка кастомных модулей Directus под ключ

Вы устали от ограничений стандартного интерфейса Directus? Когда нужно реализовать нестандартный дашборд с кастомной вёрсткой, уникальными кнопками или сложной бизнес-логикой, стандартные экраны CRUD не помогают. Мы специализируемся на разработке кастомных модулей Directus — полноценных Vue 3 страниц, которые интегрируются в админку как родные. Наш опыт: более 30 проектов, от ритейла до логистики, где именно кастомные модули решили проблемы, недоступные стандартным расширениям.

Directus предоставляет мощный API и SDK для создания Module Extensions. Это не просто виджеты, а полноценные страницы с собственными маршрутами и иконками в боковом меню. Мы используем Vue 3 и TypeScript, чтобы каждый модуль был гибким, производительным и легко поддерживаемым. Например, кастомный дашборд может агрегировать данные из нескольких коллекций, отображать интерактивные графики и предоставлять массовые операции, недоступные в стандартных дашбордах.

Средняя экономия времени при использовании кастомного модуля вместо ручного сбора данных составляет до 70%. Наша команда разработала Directus extension для крупного интернет-магазина, который автоматизировал формирование отчётов для отдела закупок. Результат: сокращение времени на подготовку отчётов с 5 часов до 30 минут. Это лишь один из 30+ модулей, которые мы внедрили за последние годы.

Как создать модуль шаг за шагом?

1. Инициализация: выполните команду npx create-directus-extension@latest, выберите тип module и укажите имя, например sales-dashboard.
2. Структура: сгенерируется шаблон с src/index.ts (регистрация) и src/module.vue (основной компонент).
3. Регистрация: в index.ts экспортируйте объект с id, name, icon и массивом routes. Каждый маршрут указывает на компонент; можно добавить дочерние пути с динамическими параметрами.
4. Разработка: в module.vue используйте Vue 3 Composition API, хуки useApi() и useRouter() из @directus/extensions-sdk. Добавьте пользовательский интерфейс с помощью компонентов Directus (v-button, v-table, v-icon и др.).
5. Сборка и деплой: соберите модуль в NPM-пакет или скопируйте папку в extensions вашего Directus-проекта. После перезагрузки админ-панели модуль появится в навигации.

Почему кастомный модуль лучше стандартной интеграции?

Стандартные экраны Directus хороши для CRUD, но когда нужна сложная бизнес-логика — уникальные отчёты, интерактивные дашборды, связь с внешними сервисами — возможностей не хватает. Кастомный модуль даёт полный контроль над HTML, CSS и логикой, при этом оставаясь частью единой админ-панели.

Какие типы модулей можно создать?

Модули могут быть совершенно разными: от простых дашбордов до полноценных бизнес-инструментов. Среди реализованных нами: дашборды с аналитикой, панели управления заказами, кастомные редакторы контента и интеграционные интерфейсы с внешними 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

Процесс разработки

Что входит в работу

• Исходный код модуля (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 месяцев и получите консультацию уже сегодня.