Modul 1: Einstieg

Was ist Vue?

Warum Vue.js für Rails-Entwickler der ideale Einstieg in die Welt der Single-Page-Applications ist.

Was ist Vue.js?

Vue.js ist ein progressives JavaScript-Framework zum Erstellen von Benutzeroberflächen. Es wurde 2014 von Evan You entwickelt und ist heute eines der beliebtesten Frontend-Frameworks weltweit — neben React und Angular.

„Progressiv" bedeutet: Du kannst Vue schrittweise einsetzen. Vom einfachen Widget auf einer bestehenden Seite bis hin zur vollständigen Single-Page-Application (SPA) — Vue wächst mit deinen Anforderungen mit.

ℹ️

Vue in Zahlen

Vue.js hat über 200.000 GitHub-Stars, wird von Unternehmen wie Alibaba, GitLab und Nintendo eingesetzt und hat eine der aktivsten Open-Source-Communities im JavaScript-Ökosystem.

Was ist eine Single-Page-Application (SPA)?

In einer klassischen Rails-Anwendung rendert der Server bei jedem Request eine neue HTML-Seite. Der Browser lädt diese Seite vollständig neu — inklusive CSS, JavaScript und allen Assets.

Eine Single-Page-Application funktioniert anders: Der Browser lädt einmalig eine HTML-Seite mit JavaScript. Danach übernimmt JavaScript die gesamte Navigation und das Rendering. Neue Daten werden per API (JSON) vom Server geholt, aber die Seite wird nie komplett neu geladen.

🛤️

Der fundamentale Unterschied

In Rails rendert der Server HTML. In Vue rendert der Browser – das ist der fundamentale Unterschied. Rails schickt bei jedem Request fertiges HTML. Vue hingegen schickt einmal JavaScript, das dann im Browser die gesamte UI aufbaut und aktualisiert.

Aspekt	Klassische Web-App (Rails)	SPA (Vue)
Rendering	Server (SSR)	Browser (CSR)
Seitenwechsel	Voller Page-Reload	Dynamisch ohne Reload
Datenübertragung	HTML pro Request	JSON über API
Interaktivität	Begrenzt (Turbo, Stimulus)	Vollständig reaktiv
Erster Ladevorgang	Schnell (fertiges HTML)	Langsamer (JS muss laden)

MVC vs. Komponentenbasierte Architektur

Als Rails-Entwickler kennst du das MVC-Pattern (Model-View-Controller): Models verwalten Daten, Views rendern HTML, Controller verbinden beides. Diese Trennung erfolgt horizontal — nach technischer Zuständigkeit.

Vue verfolgt einen komponentenbasierten Ansatz: Jede Komponente enthält ihr eigenes Template (HTML), ihre Logik (JavaScript) und ihr Styling (CSS). Die Trennung erfolgt vertikal — nach Feature oder UI-Element.

Rails-Konzept	Vue-Entsprechung	Erklärung
.erb Templates	<template>	HTML mit eingebetteter Logik
Controller	Composables	Geschäftslogik und Zustandsverwaltung
ActiveRecord Models	Pinia Stores	Datenhaltung und State Management
Partials	Komponenten	Wiederverwendbare UI-Bausteine
routes.rb	Vue Router	URL-zu-Ansicht-Zuordnung
Concerns / Service Objects	Composables	Wiederverwendbare Logik-Module
application.html.erb	App.vue	Haupt-Layout der Anwendung

💡

Nicht alles ist 1:1 übertragbar

Die Tabelle zeigt Analogien, keine exakten Entsprechungen. Vue-Komponenten vereinen Template, Logik und Styling — das gibt es in Rails so nicht. Diese Denkweise ist anfangs ungewohnt, aber schnell intuitiv.

Dein erstes Vue-Beispiel

Schauen wir uns an, wie eine minimale Vue-Komponente aussieht. Jede .vue-Datei besteht aus bis zu drei Blöcken: <template>, <script> und <style>.

HelloWorld.vue

<template>
  <div>
    <h1>{{ greeting }}</h1>
    <p>Du hast den Button {{ count }} mal geklickt.</p>
    <button @click="count++">Klick mich!</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const greeting = 'Hallo Vue!'
const count = ref(0)
</script>

Was passiert hier?

<template> — Das HTML-Template, vergleichbar mit einer ERB-Datei
{{ greeting }} — Template-Interpolation, wie <%= greeting %> in ERB
@click="count++" — Event-Binding direkt im Template
ref(0) — Reaktiver Zustand: Vue aktualisiert die Anzeige automatisch bei Änderungen
<style scoped> — CSS, das nur für diese Komponente gilt

🛤️

ERB vs. Vue Templates

In Rails schreibst du <%= @user.name %> in ERB-Templates. In Vue schreibst du {{ user.name }}. Die Syntax ist ähnlich, aber Vue-Templates werden im Browser gerendert und aktualisieren sich automatisch, wenn sich die Daten ändern — ohne Page-Reload.

Das „Progressive Framework"-Konzept

Vue bezeichnet sich selbst als „progressives Framework". Das bedeutet, du musst nicht sofort das gesamte Ökosystem verwenden. Stattdessen kannst du Vue schrittweise einführen:

Stufe 1: Einzelne Widgets

Vue auf einer bestehenden Seite einbinden, um ein einzelnes interaktives Element zu steuern — z.B. einen Autocomplete oder ein Formular.

Stufe 2: Mehrere Komponenten

Mehrere Vue-Komponenten auf der Seite, die miteinander kommunizieren. Ideal für komplexere Formulare oder Dashboards.

Stufe 3: SPA mit Router

Vue Router für clientseitiges Routing hinzufügen. Die gesamte Navigation läuft im Browser.

Stufe 4: Vollständige Anwendung

State Management (Pinia), Testing (Vitest), SSR (Nuxt) — das volle Ökosystem für produktionsreife Anwendungen.

💡

Schrittweise Migration

Das progressive Konzept ist besonders für Rails-Teams interessant: Du kannst Vue zuerst in einzelnen Views einsetzen und schrittweise mehr Interaktivität aufbauen, ohne alles auf einmal umschreiben zu müssen.

Wann Vue, wann Rails — oder beides?

Vue und Rails sind keine Gegensätze. In der Praxis gibt es drei typische Szenarien:

Szenario	Empfehlung	Beispiel
Content-Seiten, CRUD-Apps	Rails pur	Blog, Admin-Panel, CMS
Hochinteraktive UIs	Vue SPA + Rails API	Chat, Dashboard, Kanban-Board
Bestehende Rails-App + neue Features	Vue in Rails einbetten	Interaktives Formular in einer Rails-View

Beispiel: Vue in einer Rails-App (via Vite Rails)

<!-- app/views/products/index.html.erb -->
<h1>Produkte</h1>

<!-- Normales Rails-HTML -->
<p>Willkommen im Produktkatalog.</p>

<!-- Vue-Komponente eingebettet -->
<div id="product-filter">
  <%= vite_javascript_tag 'product-filter' %>
</div>

🛤️

Rails + Vue = Pragmatisch

Viele erfolgreiche Projekte nutzen Rails als Backend-API und Vue als Frontend. Rails liefert die Daten, Vue rendert die Oberfläche. Gems wie vite_rails machen die Integration nahtlos.

Zusammenfassung

Vue.js ist ein progressives Framework für reaktive Benutzeroberflächen
SPAs rendern im Browser statt auf dem Server
Vue organisiert Code in Komponenten statt in MVC-Schichten
Vue-Templates sind ähnlich wie ERB, aber reaktiv
Du kannst Vue schrittweise einführen — vom Widget bis zur vollständigen SPA
Rails und Vue ergänzen sich hervorragend als API + Frontend