[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"technology-uk-vite":3,"technology-projects-uk-vite":28,"mdc-gljd9s-key":75},{"id":4,"title":5,"category":6,"content":7,"description":8,"extension":9,"faq":10,"icon":11,"links":12,"meta":21,"projects":22,"since":24,"stem":25,"updated":26,"__hash__":27},"technologies_uk\u002Fuk\u002Ftechnologies\u002Fvite.yml","Vite","frontend","Vite — інструмент розробки та збірки фронтенду. Я використовую його через Nuxt у VetCard і цьому портфоліо, а також через інтеграцію з Laravel у DigiSpace.\n\n## Під час розробки\n\nСервер розробки підтримує гарячу заміну модулів — HMR. Завдяки цьому багато змін можна побачити без повного перезавантаження сторінки. Фактична швидкість залежить від проєкту, плагінів і комп'ютера, тому миттєве оновлення не є безумовною гарантією.\n\n## Підготовка до розгортання\n\nЗбірка готує файли фронтенду, зокрема назви з хешами й поділ коду на частини за відповідної конфігурації. Nuxt і Laravel додають власну інтеграцію навколо результату. Внутрішній збирач залежить від версії Vite, тому під час зміни налаштувань потрібно звірятися з установленими версіями інструментів.\n\n## Що я перевіряю після збірки\n\nУспішна збірка ще не доводить, що всі сторінки працюють. Адреси файлів, змінні середовища, серверний рендеринг і поведінку браузера потрібно перевіряти в цільовому середовищі. Vite є частиною процесу випуску; браузерні тести й перевірки запущеного сайту охоплюють те, чого компіляція не перевіряє.\n","Vite для Vue, Nuxt і Laravel: швидке оновлення під час розробки, підготовка статичних файлів і перевірка виробничих збірок.","yml",null,"i-simple-icons-vite",[13,18],{"label":14,"to":15,"color":16,"icon":17},"vite.dev","https:\u002F\u002Fvite.dev","neutral","i-heroicons-arrow-top-right-on-square",{"label":19,"to":20,"color":16,"icon":17},"Технічна документація","https:\u002F\u002Fvite.dev\u002Fguide\u002F",{},[23],"digispace","2021","uk\u002Ftechnologies\u002Fvite","2026-09-20","WRWGT_YnkQjJIAHRNKf448mqNP8FZ2cgSD0Y7epc6s8",[29],{"id":30,"title":31,"content":32,"date":33,"description":34,"extension":9,"featured":35,"image":36,"links":37,"meta":46,"stack":47,"stem":70,"tags":71,"url":40,"__hash__":74},"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",true,"\u002Fhero\u002Fdigispace.avif",[38,42],{"label":39,"to":40,"color":41,"icon":17},"Live Demo","https:\u002F\u002Fdigispace.pro","primary",{"label":43,"to":44,"color":16,"icon":45},"GitHub","https:\u002F\u002Fgithub.com\u002FYurij2015\u002FDigiSpace","i-simple-icons-github",{},[48,51,54,57,58,61,64,67],{"name":49,"icon":50},"Laravel","i-simple-icons-laravel",{"name":52,"icon":53},"Inertia","i-simple-icons-inertia",{"name":55,"icon":56},"Vue","i-simple-icons-vuedotjs",{"name":5,"icon":11},{"name":59,"icon":60},"MySQL","i-simple-icons-mysql",{"name":62,"icon":63},"Tailwind CSS","i-simple-icons-tailwindcss",{"name":65,"icon":66},"Filament","i-simple-icons-filament",{"name":68,"icon":69},"CMS","i-heroicons-document-text","uk\u002Fprojects\u002Fdigispace",[49,65,52,55,72,73],"i18n","SEO","6eh_R4Py3nOuDZ26oLWb7x2WWp4iSV66uJrBh_MkX_U",{"data":76,"body":77},{},{"type":78,"children":79},"root",[80,88,95,100,106,111,117],{"type":81,"tag":82,"props":83,"children":84},"element","p",{},[85],{"type":86,"value":87},"text","Vite — інструмент розробки та збірки фронтенду. Я використовую його через Nuxt у VetCard і цьому портфоліо, а також через інтеграцію з Laravel у DigiSpace.",{"type":81,"tag":89,"props":90,"children":92},"h2",{"id":91},"під-час-розробки",[93],{"type":86,"value":94},"Під час розробки",{"type":81,"tag":82,"props":96,"children":97},{},[98],{"type":86,"value":99},"Сервер розробки підтримує гарячу заміну модулів — HMR. Завдяки цьому багато змін можна побачити без повного перезавантаження сторінки. Фактична швидкість залежить від проєкту, плагінів і комп'ютера, тому миттєве оновлення не є безумовною гарантією.",{"type":81,"tag":89,"props":101,"children":103},{"id":102},"підготовка-до-розгортання",[104],{"type":86,"value":105},"Підготовка до розгортання",{"type":81,"tag":82,"props":107,"children":108},{},[109],{"type":86,"value":110},"Збірка готує файли фронтенду, зокрема назви з хешами й поділ коду на частини за відповідної конфігурації. Nuxt і Laravel додають власну інтеграцію навколо результату. Внутрішній збирач залежить від версії Vite, тому під час зміни налаштувань потрібно звірятися з установленими версіями інструментів.",{"type":81,"tag":89,"props":112,"children":114},{"id":113},"що-я-перевіряю-після-збірки",[115],{"type":86,"value":116},"Що я перевіряю після збірки",{"type":81,"tag":82,"props":118,"children":119},{},[120],{"type":86,"value":121},"Успішна збірка ще не доводить, що всі сторінки працюють. Адреси файлів, змінні середовища, серверний рендеринг і поведінку браузера потрібно перевіряти в цільовому середовищі. Vite є частиною процесу випуску; браузерні тести й перевірки запущеного сайту охоплюють те, чого компіляція не перевіряє."]