[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"technology-pl-vue":3,"technology-projects-pl-vue":34,"mdc-ix1whn-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_pl\u002Fpl\u002Ftechnologies\u002Fvue.yml","Vue.js","frontend","Vue.js to framework JavaScript do tworzenia interfejsów. Używam go w panelu placówki VetSpace, publicznej witrynie VetCard i interfejsach administracyjnych, między innymi w DigiSpace.\n\n## Różne interfejsy, wspólne narzędzia\n\n- **Panele aplikacji** — formularze, listy i procesy dla zalogowanych użytkowników.\n- **Publiczne strony** — komponenty Vue w stronach Nuxt renderowanych na serwerze.\n- **Integracja z Laravel** — Inertia łączy trasy serwerowe ze stronami Vue bez potrzeby osobnego publicznego API dla tych ekranów.\n\n## Przykład strony placówki\n\nVetCard potrzebuje zarówno czytelnych informacji o placówce, jak i interaktywnej rezerwacji wizyt. Nuxt odpowiada za renderowanie strony na serwerze, a Vue za interakcje użytkownika. Ta sama witryna pomaga więc poznać placówkę i wybrać termin wizyty.\n\n## Utrzymanie komponentów\n\nComposition API pomaga grupować powiązaną logikę, a TypeScript jasno określa parametry i wyniki. Oddzielam pobieranie danych, wspólną logikę i prezentację tam, gdzie poprawia to czytelność. Wybór frameworka nadal zależy od istniejącego projektu i zespołu: różne interfejsy mogą wymagać różnej architektury.\n","Tworzenie aplikacji Vue.js: panele SaaS, publiczne strony, wspólne komponenty, integracja z Laravel i renderowanie przez Nuxt.","yml",[11,14],{"label":12,"content":13},"Używasz Vue z Nuxt czy Laravel?","Korzystam z obu rozwiązań. Nuxt stosuję na publicznych stronach takich jak VetCard, a Vue z Laravel lub Inertia w interfejsach aplikacji. Wybór zależy od routingu, dostępu do danych i renderowania.",{"label":15,"content":16},"Jak podszedłbyś do migracji z Vue 2 do Vue 3?","Najpierw sprawdziłbym zależności i niezgodne API, a potem zaplanował zmiany według komponentów lub tras, jeśli pozwala na to architektura. Testy i stopniowe wydania pomagają kontrolować przejście.","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","pl\u002Ftechnologies\u002Fvue","2026-09-20","6hwithj9eifKxgkkTpCFcDJIwI6V7Q2hjnokWsx5k9k",[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_pl\u002Fpl\u002Fprojects\u002Fvetspace.yml","VetSpace","Dwustronna platforma weterynaryjna — katalog SEO klinik i CRM oparty na subskrypcji z wizytami i rekordami pacjentów. Publiczny katalog klinik zbudowany pod kątem pozyskiwania klientów przez SEO oraz CRM oparty na subskrypcji (wizyty, rekordy pacjentów) jako osobne aplikacje Vue\u002FNuxt na jednym API Laravel. Architektura database-per-tenant, subskrypcje Stripe przez Cashier, GraphQL + REST oraz analiza wizyt wspomagana AI przez dedykowany mikroserwis w Go.\n\n## Kluczowe funkcje\n\n- **Dwustronny lejek** - katalog SEO pozyskuje kliniki, a CRM w subskrypcji (wizyty, rekordy pacjentów) je utrzymuje\n- **Prawdziwa izolacja tenantów** - database-per-tenant trzyma dane każdej kliniki osobno, a eksport\u002Fusuwanie GDPR to operacja na bazie\n- **Dwa interfejsy API** - GraphQL dla złożonych zapytań katalogu, REST dla CRM — jedna baza kodu Laravel\n- **Billing od ręki** - subskrypcje Stripe przez Cashier: triale, zmiany planów, dunning\n- **AI tam, gdzie pomaga** - analizę wizyt wykonuje dedykowany mikroserwis w Go, nie obciążając głównego API\n\n## Stos technologiczny\n\n- **Backend**: Laravel (API)\n- **Frontend**: Vue\u002FNuxt (osobne aplikacje)\n- **Architektura**: Multi-tenancy database-per-tenant\n- **Płatności**: Stripe przez Cashier\n- **API**: GraphQL + REST\n- **AI**: Mikroserwis Go do analizy wizyt\n","2026-09-19","Dwustronna platforma weterynaryjna — katalog SEO klinik i CRM oparty na subskrypcji z wizytami i rekordami pacjentów",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},"Przegląd API","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-api","i-simple-icons-github",{"label":53,"to":54,"color":22,"icon":51},"Przegląd frontendu","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-frontend",{"label":56,"to":57,"color":22,"icon":51},"Przegląd 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","pl\u002Fprojects\u002Fvetspace",[79,61,64,80,69,75],"SaaS","Multi-tenant","xvJ2gsG93A4aTrZYPgp4UuQdQsPe-Ae8ups9tasKAD8",{"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_pl\u002Fpl\u002Fprojects\u002Fvetcard.yml","VetCard","Publiczna część VetSpace — multi-tenant katalog klinik weterynaryjnych. Jeden deployment Nuxt SSR obsługuje wszystkie kliniki: strony klinik zoptymalizowane pod SEO, rezerwację wizyt online z proxy do własnego backendu tenant każdej kliniki, tematyzację pod markę kliniki oraz obsługę wielu oddziałów.\n\n## Kluczowe funkcje\n\n- **Jeden deployment — wiele klinik** — aplikacja routuje po slugu kliniki; żądania rezerwacji i slotów są proxy'owane do backendu tenant danej kliniki\n- **Katalog SEO-first** — 590+ klinik ze stronami SSR, danymi strukturalnymi i zlokalizowanymi trasami\n- **Branding każdej kliniki** — strona kliniki jest tematyzowana jej kolorem, z badge'em \"Powered by VetSpace\"\n- **Realny UX rezerwacji** — wolne sloty pokazują liczbę dostępnych lekarzy z kodowaniem kolorami\n- **Pełna lokalizacja** — ukraiński, angielski i polski z routingiem opartym na prefiksach\n\n## Stack technologiczny\n\n- **Frontend**: Nuxt 4 \u002F Vue 3, Tailwind CSS v4\n- **Backend**: Laravel catalog API + endpointy tenant do rezerwacji\n- **Renderowanie**: SSR dla stron SEO, CSR dla flow rezerwacji\n- **Testowanie**: testy jednostkowe Vitest + Cypress E2E na realnym backendzie\n","Multi-tenant katalog klinik weterynaryjnych: SEO strony klinik, rezerwacja wizyt online, branding każdej kliniki — jedna aplikacja Nuxt obsługuje wszystkie","\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},"Przegląd projektu",{},[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","pl\u002Fprojects\u002Fvetcard",[66,64,80,107,108],"SEO","SSR","4Q1qMR6jtn2ViojU9Uk8TaztwOrlQBTjLNLBv9AASnE",{"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_pl\u002Fpl\u002Fprojects\u002Fdigipulse.yml","DigiPulse","SaaS do monitorowania dostępności — sprawdzanie co 60 sekund, śledzenie wygaśnięcia SSL, powiadomienia przez Telegram i email. Panel administracyjny i podstawowy backend zbudowane na Laravel (Octane, websockety Reverb) i Filament, a silnik monitorujący to osobny serwis w Go. Integracja logowania Google OAuth i Cloudflare Turnstile. Zawiera serwer MCP, który udostępnia dane monitoringu bezpośrednio asystentom AI. Self-hosted na Proxmox.\n\n## Kluczowe funkcje\n\n- **Dedykowany silnik w Go** - sprawdzanie dostępności wykonuje osobny serwis w Go, więc ciągłe odpytywanie co 60 sekund nie spowalnia aplikacji Laravel\n- **Dashboard w czasie rzeczywistym** - websockety Reverb przesyłają zmiany statusu do UI na żywo, bez odświeżania\n- **Octane + Filament** - Laravel rezydentny w pamięci z pełnym panelem administracyjnym dla monitorów, kontaktów i reguł alertów\n- **Serwer MCP** - monitory i incydenty dostępne dla asystentów AI (Claude, Cursor) przez Model Context Protocol\n- **Google OAuth + Turnstile** - logowanie bez hasła i ochrona przed botami na formularzach publicznych\n- **Self-hosted** - wdrożone na własnym homelab Proxmox, którym zarządzam end-to-end\n\n## Stos technologiczny\n\n- **Backend**: Laravel (Octane, websockety Reverb)\n- **Panel administracyjny**: Filament\n- **Silnik monitorujący**: Go (osobny serwis)\n- **Baza danych**: PostgreSQL\n- **Integracja AI**: Serwer MCP\n- **Infrastruktura**: Self-hosted na Proxmox\n","2026-04-17","SaaS do monitorowania dostępności: architektura event-driven — Laravel (Octane, Reverb) i Filament wysyłają zadania przez Redis do lekkiego workera w Go; serwer MCP udostępnia dane monitoringu asystentom AI; powiadomienia Telegram\u002Fe-mail","\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","pl\u002Fprojects\u002Fdigipulse",[79,61,130,144,140,136,145],"Monitoring","Event-driven","GqA86kRO7Vh1dUrEBwiAh6SARuOescZleItqed4Wz8M",{"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_pl\u002Fpl\u002Fprojects\u002Fdigispace.yml","DigiSpace","Produkcyjna strona digispace.pro — publiczny serwis agencji, panel administracyjny i autorski CMS w jednej aplikacji Laravel, teraz w pełni wielojęzyczna (EN\u002FUK\u002FPL), z panelem Filament obok starego panelu na Inertia + Vue. Ten sam kod, który obsługuje żywą stronę, jest dostępny na GitHub.\n\n## Kluczowe funkcje\n\n- **Panel administracyjny Filament** - równoległy panel `\u002Fcontrol` (24 zasoby) z edytorem TipTap, przesyłaniem obrazów bezpośrednio do MinIO i nawigacją zorientowaną na treść, wdrażany zasób po zasobie obok istniejącego panelu Inertia\n- **Wielojęzyczność od podstaw** - tłumaczone są nie tylko strony, ale i strukturalne teksty UI (menu, stopka, przyciski) dla każdej lokalizacji, z routingiem opartym na hreflang\n- **SEO wbudowane** - dane strukturalne JSON-LD, zlokalizowane sitemapy i poprawna obsługa 404 dla każdej lokalizacji\n- **Monolit zrobiony dobrze** - publiczna strona i oba panele administracyjne w jednej aplikacji Laravel, bez osobnego API\n- **Treść pod kontrolą** - strony, usługi i portfolio edytuje się w CMS — bez deploymentu dla zmiany tekstu czy tłumaczenia\n- **Bramy jakości** - testy PHPUnit i analiza statyczna PHPStan w CI\n- **Otwarty kod** - dokładnie ten kod, który obsługuje digispace.pro, jest publiczny na GitHub\n\n## Stos technologiczny\n\n- **Backend**: Laravel\n- **Panel admina**: Filament 5 (`\u002Fcontrol`) + stary panel na Inertia.js + Vue\n- **Frontend**: Vue.js, Vite\n- **Lokalizacja**: tłumaczenia treści i struktury EN\u002FUK\u002FPL\n- **Architektura**: Niestandardowy CMS\n","2022-10-05","Wielojęzyczna (EN\u002FUK\u002FPL) produkcyjna strona agencji z autorskim CMS — panel Filament z rozbudowanym edytorem treści, tłumaczenia, JSON-LD i zlokalizowane sitemapy wbudowane obok starego panelu na 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","pl\u002Fprojects\u002Fdigispace",[61,127,163,64,179,107],"i18n","Fk6DSrh4wV9UrvlIWm6anLNeGfF5gl4G-jy8qzYVLUM",{"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 to framework JavaScript do tworzenia interfejsów. Używam go w panelu placówki VetSpace, publicznej witrynie VetCard i interfejsach administracyjnych, między innymi w DigiSpace.",{"type":187,"tag":195,"props":196,"children":198},"h2",{"id":197},"różne-interfejsy-wspólne-narzędzia",[199],{"type":192,"value":200},"Różne interfejsy, wspólne narzędzia",{"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},"Panele aplikacji",{"type":192,"value":216}," — formularze, listy i procesy dla zalogowanych użytkowników.",{"type":187,"tag":206,"props":218,"children":219},{},[220,225],{"type":187,"tag":210,"props":221,"children":222},{},[223],{"type":192,"value":224},"Publiczne strony",{"type":192,"value":226}," — komponenty Vue w stronach Nuxt renderowanych na serwerze.",{"type":187,"tag":206,"props":228,"children":229},{},[230,235],{"type":187,"tag":210,"props":231,"children":232},{},[233],{"type":192,"value":234},"Integracja z Laravel",{"type":192,"value":236}," — Inertia łączy trasy serwerowe ze stronami Vue bez potrzeby osobnego publicznego API dla tych ekranów.",{"type":187,"tag":195,"props":238,"children":240},{"id":239},"przykład-strony-placówki",[241],{"type":192,"value":242},"Przykład strony placówki",{"type":187,"tag":188,"props":244,"children":245},{},[246],{"type":192,"value":247},"VetCard potrzebuje zarówno czytelnych informacji o placówce, jak i interaktywnej rezerwacji wizyt. Nuxt odpowiada za renderowanie strony na serwerze, a Vue za interakcje użytkownika. Ta sama witryna pomaga więc poznać placówkę i wybrać termin wizyty.",{"type":187,"tag":195,"props":249,"children":251},{"id":250},"utrzymanie-komponentów",[252],{"type":192,"value":253},"Utrzymanie komponentów",{"type":187,"tag":188,"props":255,"children":256},{},[257],{"type":192,"value":258},"Composition API pomaga grupować powiązaną logikę, a TypeScript jasno określa parametry i wyniki. Oddzielam pobieranie danych, wspólną logikę i prezentację tam, gdzie poprawia to czytelność. Wybór frameworka nadal zależy od istniejącego projektu i zespołu: różne interfejsy mogą wymagać różnej architektury."]