Vue.js

Vue.js ist ein JavaScript Frontend-Framework. Anders als CSS-Frameworks, bei denen man JavaScript zumeist nur verwendet, um den HTML und CSS Code zu ergänzen, ist Vue.js ein reinrassiges JavaScript Framework.

Vue.js ist dabei flexibel genug, sowohl bestehende Webseiten um einige wenige Komponenten zu ergänzen, als auch Vollständige Single-Page Webanwendungen zu programmieren. In diesem Fall werden die Seiten der  Anwendung nicht mehr als statische HTML und CSS Dateien vom Server geladen. Stattdessen wird die Struktur der Seiten und die Formatierung vollständig vom JavaScript Code aufgebaut.

Eine Besonderheit von Vue.js sind die Single File Components. Hier fasst man in einer Datei (mit Mime-Type '.vue') das HTML-Template, JavaScript Code und CSS für eine Komponente  zusammen. Aus dieser Datei wird dann der JavaScript Code erzeugt, der im Webbrowser die Seite aufbaut.

Hier ein Beispiel für einen Single File Component in einer .vue Datei:

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function () {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

Der Webentwickler kann daher wie gewohnt mit HTML Syntax und CSS arbeiten, um Struktur und Layout der einzelnen Komponenten zu beschreiben.

Der Vue Loader, der die Single File Components in JavaScript übersetzt, erlaubt es, Preprocessoren für die einzelnen Bestandteile zu verwenden. So kann man JavaScript durch TypeScript oder CoffeeScript ersetzen. Anstelle von HTML steht auch PUG zur Verfügung. Als Ersatz für CSS ist SASS sehr beliebt.

Ähnlich wie React.js oder Angular.js liefert Vue.js die Infrastruktur auf der dann wiederum Frontend-Frameworks aufsetzen. So gibt es z.B. Frameworks, welche CSS von Bootstrap oder Bulma mit Vue.js Komponenten kombinieren.