--- title: 'Frontend-Entwicklung für Agenturen: Vue.js & Nuxt' url: 'https://janraap.de/leistungen/webdesign/frontend-entwicklung' markdown: 'https://janraap.de/leistungen/webdesign/frontend-entwicklung.md' date: '2026-09-21' description: 'Frontend-Entwickler aus Ratzeburg für Agenturen: Figma-Designs komponentenbasiert umgesetzt mit Vue.js und Nuxt. Performance, Barrierefreiheit, wartbarer Code.' taxonomy: category: - webdesign tag: - frontend - ux --- Vue.js · Nuxt · Component-First # Frontend-Entwicklung für Agenturen ![](https://janraap.de/images/2/e/b/e/2/2ebe2228fd6ef4dd65c73689155e9a048edf8781-frontend-development.webp) Ich bringe die Entwürfe deiner Agentur als performante, barrierearme Frontends mit Vue.js und Nuxt in Code. Direkt mit mir, kein Projektmanager dazwischen. [ Projekt anfragen ](https://janraap.de/kontakt) ## Meine Schwerpunkte ### Frontend als echter Schwerpunkt Kein Generalist, der alles ein bisschen kann. Backend binde ich an, wo es nötig ist, die sichtbare Schicht beherrsche ich wirklich. ### Komponentenbasiert von Anfang an Kein Wasserfall vom fertigen Layout zum Prototyp. Ich steige beim Entwurf mit ein, aus Figma wird ein sauberer Komponentenbaum. ### Direkt mit mir Kein Projektmanager dazwischen. Direkter Draht, klare Kommunikation, ehrliche Einschätzung, auch wenn sie dir mal nicht gefällt. ## Stack und Arbeitsweise Ich arbeite mit [Vue.js und Nuxt](https://janraap.de/wissen/glossar#glossar-vue-nuxt). Vue für die Komponenten, Nuxt für SSR, Routing und Build. [Server-Side Rendering](https://janraap.de/wissen/glossar#glossar-server-side-rendering) bringt schnelle First Contentful Paints und sauberes Markup für die [Suchmaschinenoptimierung](https://janraap.de/leistungen/seo), Code-Splitting hält die Bundles klein. Wo ein Headless-CMS oder eine bestehende API dranhängt, klemme ich das an, ohne dass das Frontend träge wird. Bis September 2026 lief [meine eigene Seite](https://janraap.de/referenzen/nuxt-4-eigene-website) auf diesem Stack, zweisprachig und mit allen Inhalten als Markdown. Gearbeitet wird komponentenbasiert, nicht im klassischen Wasserfall. Kein pixelgenaues Layout, das fertig durchgereicht wird, dann ein Prototyp, dann die Programmierung am Ende. Ich steige beim Entwurf mit ein: Komponenten-Inventar, Design-Tokens, States und Edge-Cases klären wir, solange sie noch billig zu ändern sind. Aus Figma wird ein Komponentenbaum, kein Stapel statischer Screens. Der Code, den ihr bekommt, ist wartbar: lesbare Komponenten, klare Props, dokumentierte Annahmen. Wenn in einem Jahr jemand anderes aus eurem Team ein Feature ergänzt, findet er sich zurecht. ## Was technisch zählt **Performance.** Ladezeit und Conversion hängen messbar zusammen: [laut Portent](https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm) fällt die Conversion-Rate deutlich, je länger eine Seite zum Laden braucht. Ich optimiere von Anfang an darauf: SSR für schnelle erste Anzeige, Code-Splitting, moderne Bildformate wie WebP, schlanke Third-Party-Last. Performance ist Teil der Umsetzung, kein nachgelagerter Posten. **Mobile zuerst.** Über die Hälfte des Web-Traffics kommt von Smartphones, und Google indexiert seit dem [Mobile-First-Indexing](https://developers.google.com/search/blog/2020/03/announcing-mobile-first-indexing-for) primär die mobile Variante. Ich baue von der kleinsten Breakpoint-Stufe aus nach oben: Touch-Ziele groß genug, Typografie lesbar ohne Zoom, Formulare bedienbar mit dem Daumen. **Barrierefreiheit.** Ausreichende Kontraste, Alternativtexte, eine Navigation, die per Tastatur funktioniert, korrekte Semantik für Screenreader. Seit dem [Barrierefreiheitsstärkungsgesetz](https://janraap.de/wissen/glossar#glossar-bfsg) ist das für viele eurer Kundschaft ohnehin Pflicht. Bei mir ist es Teil der Komponenten, kein Feature, das hinterher draufgeschraubt wird. Mehr dazu im [UI-Design](https://janraap.de/leistungen/webdesign/ui-design). ## Zusammenarbeit mit dem Designteam Ich bin von Anfang an dabei und gebe früh Feedback zur Machbarkeit. Nicht alles, was in Figma gut aussieht, läuft 1:1 performant. Beispiel: eine Animation, die auf jedes Scroll-Event reagiert, ist machbar, kostet aber Frames. Dann setzen wir uns zusammen und finden eine Variante, die genauso wirkt, ohne die Seite auszubremsen. Versioniert wird mit Git, jede Änderung ist nachvollziehbar und revidierbar. Zwischenstände schaut ihr euch jederzeit an. Wenn etwas länger dauert, sage ich rechtzeitig Bescheid und liefere eine Einschätzung mit Lösungsweg, nicht erst zur Deadline. Getestet wird auf realen Geräten und Browsern, nicht nur im lokalen Chrome. Ablauf ## Ablauf und Zeitrahmen Vier Schritte von der ersten Einschätzung bis zur Übergabe. 1. ### Gespräch - Stand des Designs und der bestehenden Codebasis - Kernfunktionen und Schnittstellen - Ehrliche Ersteinschätzung zum Aufwand 2. ### Angebot - Klar abgegrenzter Leistungsumfang - Realistischer Zeitrahmen - Feste Ansprechperson: ich 3. ### Umsetzung - Landing Page: 3 bis 5 Tage - Unternehmenswebsite mit 10 bis 15 Seiten: 2 bis 3 Wochen - Größeres Projekt mit Shop, Buchung oder Mitgliederbereich: 4 bis 8 Wochen - Inklusive Feedback-Runden, Cross-Device-Tests und Feinschliff 4. ### Übergabe - Sauberer Quellcode und Zugänge zu allen Systemen - Knappe Doku zu Aufbau und Annahmen - Auf Wunsch Wartung und Performance-Monitoring ## Frontend-Umsetzung für euer nächstes Projekt Schick mir den Designstand und den groben Umfang. Du bekommst eine ehrliche Einschätzung, ob ich der Richtige dafür bin. [ Projekt anfragen ](https://janraap.de/kontakt) ## Häufige Fragen - Welche Browser deckst du ab? Alle aktuellen Browser: Chrome, Firefox, Safari und Edge, jeweils am Desktop und mobil. Getestet wird auf realen Geräten, nicht nur im lokalen Chrome. Legacy-Browser wie der Internet Explorer 11 lohnen den Mehraufwand in den meisten Projekten nicht, ihr Anteil ist verschwindend gering. Zeigen deine Analytics für deine Zielgruppe etwas anderes, planen wir die Abdeckung bewusst ein und ich sage dir vorher, was das an zusätzlichem Aufwand bedeutet. - Übernimmst du auch nur die Umsetzung, ohne Design? Ja, das ist bei Agenturaufträgen der Normalfall: Design und Konzept kommen von euch, ich setze um. Als Grundlage reichen Figma-Dateien, ein Styleguide oder auch nur die fertigen Screens. Je früher ich beim Entwurf dabei bin, desto weniger Rückfragen entstehen später, weil sich Komponenten, States und Edge-Cases dann noch günstig klären lassen. Reine Umsetzung ohne Design-Beteiligung funktioniert aber genauso. - Was kostet die Zusammenarbeit? Ab 100 €/h, abhängig von Projekt-Komplexität und Laufzeit. Bei Retainern oder längeren Projekten reden wir über Konditionen. Keine versteckten Kosten, keine Überraschungen. [Alle Fragen ansehen](https://janraap.de/wissen/faq) ## Weiterführende Informationen - ### [UI Design](https://janraap.de/leistungen/webdesign/ui-design) Barrierefreiheit und intuitive Bedienung fangen beim Interface-Design an. - ### [Referenzen](https://janraap.de/referenzen) Design Manufaktur und Schlagerblume zeigen die Frontend-Seite: Layout, Komponenten, Verhalten im Browser. --- ## Navigation - Parent: [Webdesign für kleine und mittlere Unternehmen](https://janraap.de/leistungen/webdesign.md) - Next: [UI Design Ratzeburg: barrierefrei mit System](https://janraap.de/leistungen/webdesign/ui-design.md)