Vue Islands

Progressives Framework mit großartiger Developer Experience und Ökosystem.

Überblick

Bundle-Größe: 34-35kb (Vue Runtime + Compiler)

Vue ist ein voll ausgestattetes Framework mit exzellenter Dokumentation und Tooling.

Grundstruktur

// islands/counter.js
import { createApp } from 'vue';

const CounterComponent = {
  props: {
    title: {
      type: String,
      default: 'Counter'
    }
  },
  data() {
    return {
      count: 0
    };
  },
  computed: {
    doubled() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  },
  template: `
    <div class="p-6 bg-white rounded-lg border">
      <h3 class="text-lg font-semibold mb-4">{{ title }}</h3>
      <p class="mb-2">Count: {{ count }}</p>
      <p class="mb-4 text-gray-600">Doubled: {{ doubled }}</p>
      <div class="flex gap-2">
        <button @click="decrement" class="px-4 py-2 bg-gray-600 text-white rounded">-</button>
        <button @click="increment" class="px-4 py-2 bg-blue-600 text-white rounded">+</button>
      </div>
    </div>
  `
};

export default class CounterIsland {
  constructor(element, props = {}) {
    const initialData = JSON.parse(element.dataset.initialData || '{}');
    this.app = createApp(CounterComponent, { ...initialData, ...props });
    this.app.mount(element);
  }

  destroy() {
    this.app?.unmount();
  }
}

Kernkonzepte

Reactivity - Data

data() {
  return {
    message: 'Hello',
    count: 0,
    items: []
  };
}

Computed Properties

Automatisch aktualisierte berechnete Werte:

computed: {
  doubled() {
    return this.count * 2;
  },
  filteredItems() {
    return this.items.filter(i => i.active);
  }
}

Methods

Event-Handler und Funktionen:

methods: {
  increment() {
    this.count++;
  },
  async loadData() {
    const data = await fetch('/api/data').then(r => r.json());
    this.items = data;
  }
}

Template-Direktiven

<!-- Conditional -->
<div v-if="show">Content</div>

<!-- Loop -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

<!-- Events -->
<button @click="increment">{{ count }}</button>

<!-- Two-way binding -->
<input v-model="message">

Vorteile

• ✅ Reaktives System - Automatisches UI-Update
• ✅ Template-Syntax - HTML-ähnlich
• ✅ Großes Ökosystem - Vuetify, Quasar, etc.
• ✅ Gute Balance - Features vs. Bundle-Größe

Nachteile

• ❌ Bundle-Größe - 34-35kb (größer als Svelte/Preact)
• ❌ Lernkurve - Vue-spezifische Konzepte

Vollständige Beispiele

Siehe Beispiele mit Islands für vollständige Implementierungen:

• Counter - State Management
• Contact Form - Formulare mit Validierung
• Image Carousel - Intervals & Lifecycle
• Search Filter - Live Search & Filtering