Розробка кастомних модулів Directus під ключ

Ви втомилися від обмежень стандартного інтерфейсу 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+ модулів, які ми впровадили.

Як створити модуль крок за кроком?

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 та ін.). Ми створили понад 50 унікальних UI-компонентів для модулів.
5. Збірка та деплой: зберіть модуль в NPM-пакет або скопіюйте папку в extensions вашого Directus-проєкту. Після перезавантаження адмін-панелі модуль з'явиться в навігації.

Чому кастомний модуль кращий за стандартну інтеграцію?

Стандартні екрани Directus гарні для CRUD, але коли потрібна складна бізнес-логіка — унікальні звіти, інтерактивні дашборди, зв'язок із зовнішніми сервісами — можливостей не вистачає. Кастомний модуль дає повний контроль над HTML, CSS та логікою, при цьому залишаючись частиною єдиної адмін-панелі.

Які типи модулів можна створити?

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

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

Що входить в роботу

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