Ви втомилися від обмежень стандартного інтерфейсу Directus? Коли потрібно реалізувати нестандартний дашборд з кастомною версткою, унікальними кнопками або складною бізнес-логікою, стандартні екрани CRUD не допомагають. Ми спеціалізуємося на розробці кастомних модулів Directus — повноцінних Vue 3 сторінок, які інтегруються в адмінку як рідні. Кастомні модулі Directus — це ідеальне рішення для нестандартних задач. Наш досвід: понад 30 проєктів, від рітейлу до логістики, де саме кастомні модулі вирішили проблеми, недоступні стандартним розширенням. Економія часу до 70% і коштів — до $3000 на місяць.
Directus надає потужний API та SDK для створення Module Extensions. Це не просто віджети, а повноцінні сторінки з власними маршрутами та іконками в бічному меню. Ми використовуємо Vue 3 та TypeScript, щоб кожен модуль був гнучким, продуктивним і легким у підтримці. Наприклад, кастомний дашборд може агрегувати дані з кількох колекцій, відображати інтерактивні графіки (понад 20 типів) та надавати масові операції, недоступні в стандартних дашбордах. Кастомний модуль у 5 разів ефективніший за стандартні інструменти Directus для складних завдань.
Середня економія часу при використанні кастомного модуля замість ручного збору даних становить до 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та ін.). Ми створили понад 50 унікальних UI-компонентів для модулів. - Збірка та деплой: зберіть модуль в NPM-пакет або скопіюйте папку в
extensionsвашого Directus-проєкту. Після перезавантаження адмін-панелі модуль з'явиться в навігації.
Чому кастомний модуль кращий за стандартну інтеграцію?
Стандартні екрани Directus гарні для CRUD, але коли потрібна складна бізнес-логіка — унікальні звіти, інтерактивні дашборди, зв'язок із зовнішніми сервісами — можливостей не вистачає. Кастомний модуль дає повний контроль над HTML, CSS та логікою, при цьому залишаючись частиною єдиної адмін-панелі.
| Критерій | Кастомний модуль | Стандартні засоби |
|---|---|---|
| Гнучкість UI | Повна свобода верстки (Vue 3) | Обмежений шаблонами |
| Інтеграція з API | Прямий доступ до useApi() |
Через вбудовані екрани |
| Складність бізнес-логіки | Будь-яка складність | Тільки CRUD |
| Час розробки | 2–4 дні | 0 (якщо підходить) |
Які типи модулів можна створити?
Модулі можуть бути абсолютно різними: від простих дашбордів до повноцінних бізнес-інструментів. Серед реалізованих нами: дашборди з аналітикою, панелі керування замовленнями, кастомні редактори контенту та інтеграційні інтерфейси із зовнішніми API (10+ інтегрованих API).
У нашій практиці був кейс: інтернет-магазину знадобився внутрішній дашборд для відділу закупівель. Стандартні екрани Directus не дозволяли об'єднати замовлення від постачальників, складські залишки та прогнози продажів. Ми розробили кастомний модуль з трьома вкладками: «Замовлення», «Постачальники», «Аналітика». Модуль підтягує дані з колекцій Directus, відображає їх у кастомних таблицях з можливістю масового редагування та експорту в Excel. Впровадження зайняло 4 дні, після чого відділ закупівель скоротив час на формування звітів на 70%. Вартість розробки модуля починається від $500.
Directus Documentation зазначає: "Module extensions give you complete control over the user interface and business logic of your admin panel."
Процес розробки
| Етап | Тривалість | Результат |
|---|---|---|
| Аналітика та проектування | 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 та кількості інтеграцій. Наприклад, базовий дашборд коштує від $500. Зв'яжіться з нами — оцінимо ваш проєкт за один день.
Наша команда має понад 5 років досвіду з Directus та більше 30 успішних кейсів. Замовте розробку під ключ з гарантією 6 місяців та отримайте консультацію вже сьогодні.