[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"technology-uk-vue":3,"technology-projects-uk-vue":34,"mdc-7zrglm-key":181},{"id":4,"title":5,"category":6,"content":7,"description":8,"extension":9,"faq":10,"icon":17,"links":18,"meta":24,"projects":25,"since":30,"stem":31,"updated":32,"__hash__":33},"technologies_uk\u002Fuk\u002Ftechnologies\u002Fvue.yml","Vue.js","frontend","Vue.js — JavaScript-фреймворк для створення інтерфейсів. Я використовую його в панелі клініки VetSpace, публічному сайті VetCard та адміністративних інтерфейсах, зокрема DigiSpace.\n\n## Різні інтерфейси зі спільними інструментами\n\n- **Панелі застосунків** — форми, списки та робочі процеси для авторизованих користувачів.\n- **Публічні сайти** — Vue-компоненти в Nuxt-сторінках із серверним рендерингом.\n- **Інтеграція з Laravel** — Inertia поєднує серверні маршрути з Vue-сторінками без потреби в окремому публічному API для цих екранів.\n\n## Приклад сторінки клініки\n\nVetCard потрібні і зрозуміла інформація про клініку, і інтерактивний запис на прийом. Nuxt відповідає за серверний рендеринг сторінки, а Vue — за взаємодію з користувачем. Так один сайт допомагає і прочитати про клініку, і вибрати час візиту.\n\n## Підтримка компонентів\n\nComposition API допомагає групувати пов'язану логіку, а TypeScript — явно описувати параметри й результати. Я розділяю завантаження даних, спільну логіку та відображення там, де це робить код зрозумілішим. Вибір фреймворку все одно залежить від наявного проєкту й команди: різні інтерфейси можуть потребувати різної архітектури.\n","Розробка на Vue.js для SaaS і публічних сайтів: спільні компоненти, інтеграція з Laravel і серверний рендеринг через Nuxt.","yml",[11,14],{"label":12,"content":13},"Ви використовуєте Vue з Nuxt чи Laravel?","Обидва варіанти. Nuxt — для публічних сайтів на кшталт VetCard, Vue з Laravel або Inertia — для інтерфейсів застосунків. Вибір залежить від маршрутизації, доступу до даних і рендерингу.",{"label":15,"content":16},"Як ви підійшли б до міграції з Vue 2 на Vue 3?","Спочатку перевірив би залежності й несумісні API, потім спланував зміни за компонентами чи маршрутами, якщо архітектура це дозволяє. Тести й поетапні випуски допомагають контролювати перехід.","i-simple-icons-vuedotjs",[19],{"label":20,"to":21,"color":22,"icon":23},"vuejs.org","https:\u002F\u002Fvuejs.org","neutral","i-heroicons-arrow-top-right-on-square",{},[26,27,28,29],"vetspace","vetcard","digipulse","digispace","2019","uk\u002Ftechnologies\u002Fvue","2026-09-20","yciCS_-hBR3JDK_gGVoC5UagIJa3K62mtJXh1QEFwws",[35,82,110,147],{"id":36,"title":37,"content":38,"date":39,"description":40,"extension":9,"featured":41,"image":42,"links":43,"meta":58,"stack":59,"stem":77,"tags":78,"url":46,"__hash__":81},"projects_uk\u002Fuk\u002Fprojects\u002Fvetspace.yml","VetSpace","Двостороння ветеринарна платформа — SEO-каталог клінік та CRM для підписки з призначеннями та записами пацієнтів. Публічний каталог клінік, побудований для SEO-first набуття клієнтів, та підписка на основі CRM (призначення, візити, записи пацієнтів) як окремі Vue\u002FNuxt додатки над одним Laravel API. Архітектура database-per-tenant, підписки Stripe через Cashier, GraphQL + REST, та аналіз візитів з допомогою AI через присвячений Go мікросервіс.\n\n## Ключові можливості\n\n- **Двостороння воронка** - SEO-каталог залучає клініки, а CRM за підпискою (візити, картки пацієнтів) їх утримує\n- **Справжня ізоляція тенантів** - database-per-tenant тримає дані кожної клініки окремо, а GDPR-експорт\u002Fвидалення — це операція на рівні бази\n- **Дві грані API** - GraphQL для складних запитів каталогу, REST для CRM — одна кодова база Laravel\n- **Білінг із коробки** - підписки Stripe через Cashier: тріали, зміна планів, dunning\n- **AI там, де допомагає** - аналіз візитів виконує окремий Go-мікросервіс, не навантажуючи основний API\n\n## Стек технологій\n\n- **Бекенд**: Laravel (API)\n- **Фронтенд**: Vue\u002FNuxt (окремі застосунки)\n- **Архітектура**: Database-per-tenant multi-tenancy\n- **Платежі**: Stripe через Cashier\n- **API**: GraphQL + REST\n- **AI**: Go-мікросервіс для аналізу візитів\n","2026-09-19","Двостороння ветеринарна платформа — SEO-каталог клінік та CRM для підписки з призначеннями та записами пацієнтів",true,"\u002Fhero\u002Fvetspace.avif",[44,48,52,55],{"label":45,"to":46,"color":47,"icon":23},"Live Demo","https:\u002F\u002Fvetspace.pro","primary",{"label":49,"to":50,"color":22,"icon":51},"Огляд API","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-api","i-simple-icons-github",{"label":53,"to":54,"color":22,"icon":51},"Огляд фронтенду","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-frontend",{"label":56,"to":57,"color":22,"icon":51},"Огляд VetCard","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-vetcard",{},[60,63,65,68,71,74],{"name":61,"icon":62},"Laravel","i-simple-icons-laravel",{"name":64,"icon":17},"Vue",{"name":66,"icon":67},"Nuxt","i-simple-icons-nuxtdotjs",{"name":69,"icon":70},"Stripe","i-simple-icons-stripe",{"name":72,"icon":73},"GraphQL","i-simple-icons-graphql",{"name":75,"icon":76},"AI","i-heroicons-sparkles","uk\u002Fprojects\u002Fvetspace",[79,61,64,80,69,75],"SaaS","Multi-tenant","DG_13GfOpIs-FP9mwOJDR33DOhZ0GdfeSK1u1JLzZt8",{"id":83,"title":84,"content":85,"date":32,"description":86,"extension":9,"featured":41,"image":87,"links":88,"meta":93,"stack":94,"stem":105,"tags":106,"url":90,"__hash__":109},"projects_uk\u002Fuk\u002Fprojects\u002Fvetcard.yml","VetCard","Публічна частина VetSpace — мультитенантний каталог ветеринарних клінік. Один Nuxt SSR-деплой обслуговує всі клініки: SEO-сторінки клінік, онлайн-запис на прийом з проксуванням до tenant-бекенду кожної клініки, темізація під бренд клініки та підтримка філій.\n\n## Ключові особливості\n\n- **Один деплой — багато клінік** — застосунок маршрутизує за slug клініки; запити на запис і слоти проксуються до власного tenant-бекенду кожної клініки\n- **SEO-first каталог** — 590+ клінік з SSR-сторінками, структурованими даними та локалізованими маршрутами\n- **Брендинг кожної клініки** — сторінка клініки темізується її кольором, з бейджем \"Powered by VetSpace\"\n- **Реальний UX запису** — вільні слоти показують кількість вільних лікарів із кольоровим кодуванням дефіциту\n- **Повна локалізація** — українська, англійська та польська з prefix-маршрутизацією\n\n## Технології\n\n- **Фронтенд**: Nuxt 4 \u002F Vue 3, Tailwind CSS v4\n- **Бекенд**: Laravel catalog API + tenant-ендпоінти для запису\n- **Рендеринг**: SSR для SEO-сторінок, CSR для флоу запису\n- **Тестування**: Vitest юніт-тести + Cypress E2E проти реального бекенду\n","Мультитенантний каталог ветеринарних клінік: SEO-сторінки клінік, онлайн-запис на прийом, брендинг кожної клініки — один Nuxt-застосунок обслуговує всіх","\u002Fhero\u002Fvetcard.avif",[89,91],{"label":45,"to":90,"color":47,"icon":23},"https:\u002F\u002Fvetcard.pro",{"label":92,"to":57,"color":22,"icon":51},"Огляд проєкту",{},[95,96,97,100,103],{"name":66,"icon":67},{"name":64,"icon":17},{"name":98,"icon":99},"TypeScript","i-simple-icons-typescript",{"name":101,"icon":102},"Tailwind CSS","i-simple-icons-tailwindcss",{"name":104,"icon":62},"Laravel API","uk\u002Fprojects\u002Fvetcard",[66,64,80,107,108],"SEO","SSR","RHyDtiD49495RNKUgIdwAcH8oiwELVMSL6Ik4JsT6H4",{"id":111,"title":112,"content":113,"date":114,"description":115,"extension":9,"featured":41,"image":116,"links":117,"meta":123,"stack":124,"stem":142,"tags":143,"url":119,"__hash__":146},"projects_uk\u002Fuk\u002Fprojects\u002Fdigipulse.yml","DigiPulse","SaaS для моніторингу доступності — перевірки кожні 60 секунд, відстеження закінчення SSL, сповіщення через Telegram та email. Адмін панель та основний бекенд побудовані з Laravel (Octane, Reverb websockets) та Filament, а моніторинг-движок — окремий Go сервіс. Інтеграція Google OAuth sign-in та Cloudflare Turnstile. Включає MCP сервер, який надає дані моніторингу безпосередньо до AI асистентів. Self-hosted на Proxmox.\n\n## Ключові можливості\n\n- **Окремий Go-движок** - перевірки доступності виконує окремий Go-сервіс, тож постійний поллінг кожні 60 секунд не гальмує Laravel-застосунок\n- **Дашборд у реальному часі** - Reverb websockets передають зміни статусу в UI наживо, без ручного оновлення\n- **Octane + Filament** - резидентний у пам'яті Laravel із повною адмін-панеллю для моніторів, контактів і правил сповіщень\n- **MCP-сервер** - монітори та інциденти доступні для AI-асистентів (Claude, Cursor) через Model Context Protocol\n- **Google OAuth + Turnstile** - вхід без пароля та захист від ботів на публічних формах\n- **Self-hosted** - розгорнуто на власному Proxmox-хомлабі, який я адмініструю повністю\n\n## Стек технологій\n\n- **Бекенд**: Laravel (Octane, Reverb websockets)\n- **Адмін-панель**: Filament\n- **Движок моніторингу**: Go (окремий сервіс)\n- **База даних**: PostgreSQL\n- **Інтеграція AI**: MCP-сервер\n- **Інфраструктура**: Self-hosted на Proxmox\n","2026-04-17","SaaS для моніторингу доступності: event-driven архітектура — Laravel (Octane, Reverb) і Filament диспетчеризують перевірки через Redis у легкий Go-воркер; MCP-сервер дає дані моніторингу AI-асистентам; сповіщення Telegram\u002Femail","\u002Fhero\u002Fdigipulse.avif",[118,120],{"label":45,"to":119,"color":47,"icon":23},"https:\u002F\u002Fdigipulse.cloud",{"label":121,"to":122,"color":22,"icon":51},"GitHub","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fdigipulse-backend",{},[125,126,129,132,135,138,139],{"name":61,"icon":62},{"name":127,"icon":128},"Filament","i-simple-icons-filament",{"name":130,"icon":131},"Go","i-simple-icons-go",{"name":133,"icon":134},"PostgreSQL","i-simple-icons-postgresql",{"name":136,"icon":137},"Redis","i-simple-icons-redis",{"name":64,"icon":17},{"name":140,"icon":141},"MCP","i-heroicons-cpu-chip","uk\u002Fprojects\u002Fdigipulse",[79,61,130,144,140,136,145],"Monitoring","Event-driven","jNmJS9kMabUQ04ggukPIRPMSLui7xNAbE9Nsuuw99ag",{"id":148,"title":149,"content":150,"date":151,"description":152,"extension":9,"featured":41,"image":153,"links":154,"meta":159,"stack":160,"stem":177,"tags":178,"url":156,"__hash__":180},"projects_uk\u002Fuk\u002Fprojects\u002Fdigispace.yml","DigiSpace","Production-сайт digispace.pro — публічний сайт агенції, адмін-панель та кастомна CMS в одному застосунку Laravel, тепер повністю мультимовний (EN\u002FUK\u002FPL), з Filament-панеллю поруч зі старою адмінкою на Inertia + Vue. Той самий код, що працює на живому сайті, доступний на GitHub.\n\n## Ключові можливості\n\n- **Адмін-панель на Filament** - паралельна панель `\u002Fcontrol` (24 ресурси) з TipTap-редактором, заливкою зображень напряму в MinIO та контент-орієнтованою навігацією, впроваджена ресурс за ресурсом поруч з існуючою Inertia-адмінкою\n- **Мультимовність за задумом** - перекладаються не лише сторінки, а й структурні UI-рядки (меню, футер, кнопки) для кожної локалі, з hreflang-маршрутизацією\n- **SEO з коробки** - структуровані дані JSON-LD, локалізовані sitemap та коректна обробка 404 для кожної локалі\n- **Моноліт як треба** - публічний сайт і обидві адмінки в одному застосунку Laravel, без окремого API\n- **Самостійний контент** - сторінки, послуги й кейси редагуються в CMS — без деплою заради зміни тексту чи перекладу\n- **Брама якості** - PHPUnit-тести та статичний аналіз PHPStan у CI\n- **Відкритий код** - саме той код, що обслуговує digispace.pro, публічний на GitHub\n\n## Стек технологій\n\n- **Бекенд**: Laravel\n- **Адмінка**: Filament 5 (`\u002Fcontrol`) + стара адмінка на Inertia.js + Vue\n- **Фронтенд**: Vue.js, Vite\n- **Локалізація**: переклади контенту й структури EN\u002FUK\u002FPL\n- **Архітектура**: Кастомна CMS\n","2022-10-05","Мультимовний (EN\u002FUK\u002FPL) production-сайт агенції з кастомною CMS — Filament-панель з розширеним редактором контенту, переклади, JSON-LD і локалізовані sitemap із коробки, поруч зі старою адмінкою на Inertia + Vue","\u002Fhero\u002Fdigispace.avif",[155,157],{"label":45,"to":156,"color":47,"icon":23},"https:\u002F\u002Fdigispace.pro",{"label":121,"to":158,"color":22,"icon":51},"https:\u002F\u002Fgithub.com\u002FYurij2015\u002FDigiSpace",{},[161,162,165,166,169,172,173,174],{"name":61,"icon":62},{"name":163,"icon":164},"Inertia","i-simple-icons-inertia",{"name":64,"icon":17},{"name":167,"icon":168},"Vite","i-simple-icons-vite",{"name":170,"icon":171},"MySQL","i-simple-icons-mysql",{"name":101,"icon":102},{"name":127,"icon":128},{"name":175,"icon":176},"CMS","i-heroicons-document-text","uk\u002Fprojects\u002Fdigispace",[61,127,163,64,179,107],"i18n","6eh_R4Py3nOuDZ26oLWb7x2WWp4iSV66uJrBh_MkX_U",{"data":182,"body":183},{},{"type":184,"children":185},"root",[186,194,201,237,243,248,254],{"type":187,"tag":188,"props":189,"children":190},"element","p",{},[191],{"type":192,"value":193},"text","Vue.js — JavaScript-фреймворк для створення інтерфейсів. Я використовую його в панелі клініки VetSpace, публічному сайті VetCard та адміністративних інтерфейсах, зокрема DigiSpace.",{"type":187,"tag":195,"props":196,"children":198},"h2",{"id":197},"різні-інтерфейси-зі-спільними-інструментами",[199],{"type":192,"value":200},"Різні інтерфейси зі спільними інструментами",{"type":187,"tag":202,"props":203,"children":204},"ul",{},[205,217,227],{"type":187,"tag":206,"props":207,"children":208},"li",{},[209,215],{"type":187,"tag":210,"props":211,"children":212},"strong",{},[213],{"type":192,"value":214},"Панелі застосунків",{"type":192,"value":216}," — форми, списки та робочі процеси для авторизованих користувачів.",{"type":187,"tag":206,"props":218,"children":219},{},[220,225],{"type":187,"tag":210,"props":221,"children":222},{},[223],{"type":192,"value":224},"Публічні сайти",{"type":192,"value":226}," — Vue-компоненти в Nuxt-сторінках із серверним рендерингом.",{"type":187,"tag":206,"props":228,"children":229},{},[230,235],{"type":187,"tag":210,"props":231,"children":232},{},[233],{"type":192,"value":234},"Інтеграція з Laravel",{"type":192,"value":236}," — Inertia поєднує серверні маршрути з Vue-сторінками без потреби в окремому публічному API для цих екранів.",{"type":187,"tag":195,"props":238,"children":240},{"id":239},"приклад-сторінки-клініки",[241],{"type":192,"value":242},"Приклад сторінки клініки",{"type":187,"tag":188,"props":244,"children":245},{},[246],{"type":192,"value":247},"VetCard потрібні і зрозуміла інформація про клініку, і інтерактивний запис на прийом. Nuxt відповідає за серверний рендеринг сторінки, а Vue — за взаємодію з користувачем. Так один сайт допомагає і прочитати про клініку, і вибрати час візиту.",{"type":187,"tag":195,"props":249,"children":251},{"id":250},"підтримка-компонентів",[252],{"type":192,"value":253},"Підтримка компонентів",{"type":187,"tag":188,"props":255,"children":256},{},[257],{"type":192,"value":258},"Composition API допомагає групувати пов'язану логіку, а TypeScript — явно описувати параметри й результати. Я розділяю завантаження даних, спільну логіку та відображення там, де це робить код зрозумілішим. Вибір фреймворку все одно залежить від наявного проєкту й команди: різні інтерфейси можуть потребувати різної архітектури."]