[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"technology-uk-nuxt":3,"technology-projects-uk-nuxt":35,"mdc-2zmmj7-key":110},{"id":4,"title":5,"category":6,"content":7,"description":8,"extension":9,"faq":10,"icon":17,"links":18,"meta":27,"projects":28,"since":31,"stem":32,"updated":33,"__hash__":34},"technologies_uk\u002Fuk\u002Ftechnologies\u002Fnuxt.yml","Nuxt","frontend","Nuxt — фреймворк для Vue-застосунків із маршрутизацією та серверним рендерингом. Я використовую його для публічного каталогу VetCard і цього портфоліо, де відвідувачі й пошукові системи мають отримувати вміст сторінки вже у відповіді сервера.\n\n## Приклади з моїх проєктів\n\nVetCard поєднує сторінки клінік з інтерактивним записом на прийом. Один застосунок обслуговує кілька клінік, підтримує мовні версії та індивідуальні кольори оформлення. Це портфоліо використовує Nuxt Content для перекладених YAML-файлів і генерує зображення для соціальних мереж під час роботи сервера.\n\n## Що входить у роботу над SEO\n\nСерверний рендеринг віддає HTML-контент без очікування на виконання JavaScript у браузері. Окремо я налаштовую метадані, канонічні адреси, мовні альтернативи й карту сайту. Це допомагає пошуковим системам знаходити та розуміти сторінки, але не гарантує індексації чи позицій. Пошукові системи можуть виконувати JavaScript, проте це додає етап обробки.\n\n## Рендеринг і розгортання\n\nNuxt підтримує різні режими рендерингу. Вибір залежить від сторінки: інтерактивність сама по собі не вимагає вимикати серверний рендеринг. У цьому портфоліо налаштовано серверний рендеринг та ISR-кешування Vercel для визначених маршрутів; попередню генерацію сторінок у виробничій збірці вимкнено.\n","Розробка багатомовних сайтів на Nuxt: серверний рендеринг, SEO-метадані, каталоги клінік і контентні сторінки на Vue.","yml",[11,14],{"label":12,"content":13},"Навіщо використовувати Nuxt для публічного сайту?","Серверний рендеринг робить контент доступним у початковій HTML-відповіді. Nuxt також дає інструменти маршрутизації та метаданих. Сайти на JavaScript можуть індексуватися, але серверний рендеринг зменшує залежність від виконання коду пошуковим роботом.",{"label":15,"content":16},"Яку версію Nuxt ви використовуєте?","Це портфоліо й VetCard працюють на Nuxt 4. У портфоліо також є Nuxt Content, Nuxt Image, локалізація та генерування зображень для соціальних мереж під час роботи сервера. Набір модулів залежить від проєкту.","i-simple-icons-nuxtdotjs",[19,24],{"label":20,"to":21,"color":22,"icon":23},"nuxt.com","https:\u002F\u002Fnuxt.com","neutral","i-heroicons-arrow-top-right-on-square",{"label":25,"to":26,"color":22,"icon":23},"Технічна документація","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fcrawling-indexing\u002Fjavascript\u002Fjavascript-seo-basics",{},[29,30],"vetcard","vetspace","2022","uk\u002Ftechnologies\u002Fnuxt","2026-09-20","CHb425UXeeItvPAErx_ADjhtN0w1KIBG0GVJNGb3rjY",[36,73],{"id":37,"title":38,"content":39,"date":33,"description":40,"extension":9,"featured":41,"image":42,"links":43,"meta":52,"stack":53,"stem":67,"tags":68,"url":46,"__hash__":72},"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-застосунок обслуговує всіх",true,"\u002Fhero\u002Fvetcard.avif",[44,48],{"label":45,"to":46,"color":47,"icon":23},"Live Demo","https:\u002F\u002Fvetcard.pro","primary",{"label":49,"to":50,"color":22,"icon":51},"Огляд проєкту","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-vetcard","i-simple-icons-github",{},[54,55,58,61,64],{"name":5,"icon":17},{"name":56,"icon":57},"Vue","i-simple-icons-vuedotjs",{"name":59,"icon":60},"TypeScript","i-simple-icons-typescript",{"name":62,"icon":63},"Tailwind CSS","i-simple-icons-tailwindcss",{"name":65,"icon":66},"Laravel API","i-simple-icons-laravel","uk\u002Fprojects\u002Fvetcard",[5,56,69,70,71],"Multi-tenant","SEO","SSR","RHyDtiD49495RNKUgIdwAcH8oiwELVMSL6Ik4JsT6H4",{"id":74,"title":75,"content":76,"date":77,"description":78,"extension":9,"featured":41,"image":79,"links":80,"meta":91,"stack":92,"stem":106,"tags":107,"url":82,"__hash__":109},"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 для підписки з призначеннями та записами пацієнтів","\u002Fhero\u002Fvetspace.avif",[81,83,86,89],{"label":45,"to":82,"color":47,"icon":23},"https:\u002F\u002Fvetspace.pro",{"label":84,"to":85,"color":22,"icon":51},"Огляд API","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-api",{"label":87,"to":88,"color":22,"icon":51},"Огляд фронтенду","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-frontend",{"label":90,"to":50,"color":22,"icon":51},"Огляд VetCard",{},[93,95,96,97,100,103],{"name":94,"icon":66},"Laravel",{"name":56,"icon":57},{"name":5,"icon":17},{"name":98,"icon":99},"Stripe","i-simple-icons-stripe",{"name":101,"icon":102},"GraphQL","i-simple-icons-graphql",{"name":104,"icon":105},"AI","i-heroicons-sparkles","uk\u002Fprojects\u002Fvetspace",[108,94,56,69,98,104],"SaaS","DG_13GfOpIs-FP9mwOJDR33DOhZ0GdfeSK1u1JLzZt8",{"data":111,"body":112},{},{"type":113,"children":114},"root",[115,123,130,135,141,146,152],{"type":116,"tag":117,"props":118,"children":119},"element","p",{},[120],{"type":121,"value":122},"text","Nuxt — фреймворк для Vue-застосунків із маршрутизацією та серверним рендерингом. Я використовую його для публічного каталогу VetCard і цього портфоліо, де відвідувачі й пошукові системи мають отримувати вміст сторінки вже у відповіді сервера.",{"type":116,"tag":124,"props":125,"children":127},"h2",{"id":126},"приклади-з-моїх-проєктів",[128],{"type":121,"value":129},"Приклади з моїх проєктів",{"type":116,"tag":117,"props":131,"children":132},{},[133],{"type":121,"value":134},"VetCard поєднує сторінки клінік з інтерактивним записом на прийом. Один застосунок обслуговує кілька клінік, підтримує мовні версії та індивідуальні кольори оформлення. Це портфоліо використовує Nuxt Content для перекладених YAML-файлів і генерує зображення для соціальних мереж під час роботи сервера.",{"type":116,"tag":124,"props":136,"children":138},{"id":137},"що-входить-у-роботу-над-seo",[139],{"type":121,"value":140},"Що входить у роботу над SEO",{"type":116,"tag":117,"props":142,"children":143},{},[144],{"type":121,"value":145},"Серверний рендеринг віддає HTML-контент без очікування на виконання JavaScript у браузері. Окремо я налаштовую метадані, канонічні адреси, мовні альтернативи й карту сайту. Це допомагає пошуковим системам знаходити та розуміти сторінки, але не гарантує індексації чи позицій. Пошукові системи можуть виконувати JavaScript, проте це додає етап обробки.",{"type":116,"tag":124,"props":147,"children":149},{"id":148},"рендеринг-і-розгортання",[150],{"type":121,"value":151},"Рендеринг і розгортання",{"type":116,"tag":117,"props":153,"children":154},{},[155],{"type":121,"value":156},"Nuxt підтримує різні режими рендерингу. Вибір залежить від сторінки: інтерактивність сама по собі не вимагає вимикати серверний рендеринг. У цьому портфоліо налаштовано серверний рендеринг та ISR-кешування Vercel для визначених маршрутів; попередню генерацію сторінок у виробничій збірці вимкнено."]