[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"technology-en-vue":3,"technology-projects-en-vue":34,"mdc--5p8plp-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_en\u002Fen\u002Ftechnologies\u002Fvue.yml","Vue.js","frontend","Vue.js is a JavaScript framework for building user interfaces. I use it for the VetSpace clinic panel, VetCard's public website and the administration interfaces in projects such as DigiSpace.\n\n## Different interfaces, shared tools\n\n- **Application panels** — forms, lists and interactive workflows for signed-in users.\n- **Public websites** — Vue components within Nuxt pages rendered on the server.\n- **Laravel integration** — Inertia connects server-side routes with Vue pages without requiring a separate public API for those screens.\n\n## A clinic page as an example\n\nVetCard needs both readable clinic information and an interactive booking interface. Nuxt handles the page's server rendering, while Vue manages user interactions. This lets the same site serve visitors reading about a clinic and those choosing an appointment.\n\n## Keeping components maintainable\n\nThe Composition API helps group related behavior, and TypeScript makes component contracts explicit. I separate data loading, reusable logic and presentation where that improves readability. Framework choice still depends on the existing codebase and team: Vue is my main tool, not a guarantee that every frontend problem needs the same architecture.\n","Vue.js development for SaaS dashboards and public websites: reusable components, Laravel integration and server rendering through Nuxt.","yml",[11,14],{"label":12,"content":13},"Do you use Vue with Nuxt or Laravel?","Both. I use Nuxt for public websites such as VetCard, and Vue with Laravel or Inertia for application interfaces. The choice depends on routing, data access and rendering needs.",{"label":15,"content":16},"How would you approach a Vue 2 to Vue 3 migration?","I would first review dependencies and incompatible APIs, then plan changes around components or routes where the architecture allows it. Tests and staged releases help manage the transition.","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","en\u002Ftechnologies\u002Fvue","2026-09-20","uELJkGMM88g8lJPBk8YvzSCFaEB518320xAr9QS1_OM",[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_en\u002Fen\u002Fprojects\u002Fvetspace.yml","VetSpace","A two-sided veterinary platform — an SEO clinic catalog and a subscription-based CRM with appointments and patient records. A public clinic catalog built for SEO-first customer acquisition, and a subscription-based CRM (appointments, visits, patient records) as separate Vue\u002FNuxt apps on top of a single Laravel API. Database-per-tenant architecture, Stripe subscriptions via Cashier, GraphQL + REST, and AI-assisted visit analysis through a dedicated Go microservice.\n\n## Key Features\n\n- **Two-sided funnel** - an SEO-first public catalog acquires clinics; the subscription CRM (appointments, patient records) retains them\n- **True tenant isolation** - database-per-tenant keeps every clinic's data separate and makes GDPR export\u002Fdelete a per-database operation\n- **Dual API surface** - GraphQL for complex catalog queries, REST for the CRM — one Laravel codebase\n- **Billing built-in** - Stripe subscriptions via Cashier: trials, plan changes, dunning\n- **AI where it helps** - visit analysis runs in a dedicated Go microservice, keeping the main API unburdened\n\n## Tech Stack\n\n- **Backend**: Laravel (API)\n- **Frontend**: Vue\u002FNuxt (separate apps)\n- **Architecture**: Database-per-tenant multi-tenancy\n- **Payments**: Stripe via Cashier\n- **API**: GraphQL + REST\n- **AI**: Go microservice for visit analysis\n","2026-09-19","A two-sided veterinary platform — an SEO clinic catalog and a subscription-based CRM with appointments and patient records",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 Overview","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-api","i-simple-icons-github",{"label":53,"to":54,"color":22,"icon":51},"Frontend Overview","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-frontend",{"label":56,"to":57,"color":22,"icon":51},"VetCard Overview","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","en\u002Fprojects\u002Fvetspace",[79,61,64,80,69,75],"SaaS","Multi-tenant","NDJ-cDU24m4uCf7HzSeTbCgbh0MGVh5P5HASDymy0wA",{"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_en\u002Fen\u002Fprojects\u002Fvetcard.yml","VetCard","The public-facing side of VetSpace — a multi-tenant catalog of veterinary clinics. A single Nuxt SSR deployment serves every clinic: SEO-first clinic card pages, online appointment booking proxied to each clinic's own tenant backend, per-clinic theming, and multi-branch support.\n\n## Key Features\n\n- **One deployment, many clinics** — a single app routes by clinic slug; booking and slot requests are proxied to each clinic's own tenant backend\n- **SEO-first catalog** — 590+ clinics with SSR pages, structured data and localized routes built to be indexed\n- **Per-clinic branding** — every clinic page is themed by its own brand color, with a \"Powered by VetSpace\" badge\n- **Real booking UX** — available slots show free-doctor counts with scarcity color-coding\n- **Fully localized** — Ukrainian, English and Polish with prefix-based routing\n\n## Tech Stack\n\n- **Frontend**: Nuxt 4 \u002F Vue 3, Tailwind CSS v4\n- **Backend**: Laravel catalog API + per-tenant appointment endpoints\n- **Rendering**: SSR for SEO pages, CSR for booking flows\n- **Testing**: Vitest unit tests + Cypress E2E against a real backend\n","Multi-tenant catalog of veterinary clinics: SEO clinic pages, online appointment booking, per-clinic branding — one Nuxt app serves every clinic","\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},"Overview",{},[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","en\u002Fprojects\u002Fvetcard",[66,64,80,107,108],"SEO","SSR","E8OJJw44yMkVkIiATLwF2krirApHUeRnAApzpvv7c10",{"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_en\u002Fen\u002Fprojects\u002Fdigipulse.yml","DigiPulse","Uptime monitoring SaaS — 60-second checks, SSL expiry tracking, Telegram and email notifications. The admin panel and core backend are built with Laravel (Octane, Reverb websockets) and Filament, while the monitoring engine is a separate Go service. Includes Google OAuth sign-in and Cloudflare Turnstile integration, plus an MCP server that exposes monitoring data directly to AI assistants. Self-hosted on Proxmox.\n\n## Key Features\n\n- **Dedicated Go engine** - availability checks run in a separate Go service, so constant 60-second polling never slows down the Laravel app\n- **Real-time dashboard** - Reverb websockets push status changes to the UI live, no manual refresh\n- **Octane + Filament** - resident-memory Laravel with a full admin panel for monitors, contacts and alert rules\n- **MCP server** - monitors and incidents are queryable from AI assistants (Claude, Cursor) via the Model Context Protocol\n- **Google OAuth + Turnstile** - passwordless sign-in and bot protection on public forms\n- **Self-hosted** - deployed on a Proxmox homelab I manage end-to-end\n\n## Tech Stack\n\n- **Backend**: Laravel (Octane, Reverb websockets)\n- **Admin Panel**: Filament\n- **Monitoring Engine**: Go (separate service)\n- **Database**: PostgreSQL\n- **AI Integration**: MCP server\n- **Infrastructure**: Self-hosted on Proxmox\n","2026-04-17","Uptime monitoring SaaS: event-driven architecture — Laravel (Octane, Reverb) + Filament dispatch checks through Redis to a lightweight Go worker; an MCP server exposes monitoring data to AI assistants; Telegram\u002Femail alerts","\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","en\u002Fprojects\u002Fdigipulse",[79,61,130,144,140,136,145],"Monitoring","Event-driven","b7hu-_otqukg-JY_hPBvmlUYk5jVOx42XpCotH6Cvqo",{"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_en\u002Fen\u002Fprojects\u002Fdigispace.yml","DigiSpace","The production website behind digispace.pro — the agency's public site, admin panel and custom CMS in a single Laravel app, now fully multilingual (EN\u002FUK\u002FPL) with a Filament admin panel running alongside the legacy Inertia + Vue one. The same code that runs the live site is available on GitHub.\n\n## Key Features\n\n- **Filament admin panel** - a parallel `\u002Fcontrol` panel (24 resources) with a TipTap rich editor, straight-to-MinIO image uploads and content-first navigation, rolled out resource-by-resource next to the existing Inertia admin\n- **Multilingual by design** - both content and structural UI strings (menus, footer, buttons) are translated per locale, not just page text, with hreflang-aware localized routing\n- **SEO built in** - JSON-LD structured data, localized sitemaps and proper 404 handling across every locale\n- **Monolith done right** - public site and two admin surfaces live in one Laravel app, no separate API to maintain\n- **Self-managed content** - pages, services and portfolio entries are edited in the CMS — no deploy needed for a text or translation change\n- **Quality gates** - PHPUnit tests and PHPStan static analysis run in CI\n- **Source available** - the exact code serving digispace.pro is public on GitHub\n\n## Tech Stack\n\n- **Backend**: Laravel\n- **Admin**: Filament 5 (`\u002Fcontrol`) + legacy Inertia.js + Vue admin\n- **Frontend**: Vue.js, Vite\n- **Localization**: EN\u002FUK\u002FPL content and structure translations\n- **Architecture**: Custom CMS\n","2022-10-05","The agency's multilingual (EN\u002FUK\u002FPL) production site with a custom CMS — a Filament admin panel with a rich content editor, content translations, JSON-LD and localized sitemaps built in, alongside the legacy Inertia + Vue admin","\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","en\u002Fprojects\u002Fdigispace",[61,127,163,64,179,107],"i18n","dtWB-9st6fApdLs4qomkqmMQVq9PBqeHoPzR0Ywgu0I",{"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 is a JavaScript framework for building user interfaces. I use it for the VetSpace clinic panel, VetCard's public website and the administration interfaces in projects such as DigiSpace.",{"type":187,"tag":195,"props":196,"children":198},"h2",{"id":197},"different-interfaces-shared-tools",[199],{"type":192,"value":200},"Different interfaces, shared tools",{"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},"Application panels",{"type":192,"value":216}," — forms, lists and interactive workflows for signed-in users.",{"type":187,"tag":206,"props":218,"children":219},{},[220,225],{"type":187,"tag":210,"props":221,"children":222},{},[223],{"type":192,"value":224},"Public websites",{"type":192,"value":226}," — Vue components within Nuxt pages rendered on the server.",{"type":187,"tag":206,"props":228,"children":229},{},[230,235],{"type":187,"tag":210,"props":231,"children":232},{},[233],{"type":192,"value":234},"Laravel integration",{"type":192,"value":236}," — Inertia connects server-side routes with Vue pages without requiring a separate public API for those screens.",{"type":187,"tag":195,"props":238,"children":240},{"id":239},"a-clinic-page-as-an-example",[241],{"type":192,"value":242},"A clinic page as an example",{"type":187,"tag":188,"props":244,"children":245},{},[246],{"type":192,"value":247},"VetCard needs both readable clinic information and an interactive booking interface. Nuxt handles the page's server rendering, while Vue manages user interactions. This lets the same site serve visitors reading about a clinic and those choosing an appointment.",{"type":187,"tag":195,"props":249,"children":251},{"id":250},"keeping-components-maintainable",[252],{"type":192,"value":253},"Keeping components maintainable",{"type":187,"tag":188,"props":255,"children":256},{},[257],{"type":192,"value":258},"The Composition API helps group related behavior, and TypeScript makes component contracts explicit. I separate data loading, reusable logic and presentation where that improves readability. Framework choice still depends on the existing codebase and team: Vue is my main tool, not a guarantee that every frontend problem needs the same architecture."]