#vuecember2020 #nuxt

Hilfreiche Nuxt-Plugins

Wir nutzen als grundsätzlichen Projekt-Aufbau Nuxt.js für unsere Projekte. Im gesamten Nuxt-Kosmos gibt es diverse hilfreiche Plugins, die wir hier gerne einmal vorstellen:

PWA

Dieses Plugin kümmert sich um die wesentlichen Aspekte, die wir zum Erstellen einer vollwertigen Progressive Web App benötigen. Dadurch sparen wir uns eine Menge Aufwand, die in das spezifische Setup der einzelnen Bestandteile einer PWA fließen würden. Hier geht es zur Dokumentation von Nuxt PWA.

TypeScript

In allen neuen Projekten setzen wir TypeScript ein, um durch Typensicherheit robustere Frontend-Logik bauen zu können. Daher ist das TypeScript-Modul ein absolutes Must Have in unseren Projekten. Hier geht es zur Doku von Nuxt Typescript.

i18n

In manchen Projekten benötigen wir mehrsprachige Seiten. Auch in einsprachigen Projekten gibt es Wörter und Bestandteile, die nicht per CMS pflegbar sind. Für diese nutzen wir statt direkter Strings lieber Translation Keys. nuxt-i18n hilft uns dabei, diese pflegeleicht im Projekt einzusetzen. Hier geht es zur Dokumentation von Nuxt i18n.

SVG

Icons nutzen wir in den Projekten meist als einzelne Vue-Komponenten. Dies verleiht uns ein großes Maß an Flexibilität beim Verwenden der Icons. Mit Nuxt SVG können wir die Icons sehr einfach importieren und weiterverwenden. Hier geht es zur Dokumentation von Nuxt SVG.

Apollo

Viele Unternehmen haben den Umstieg auf ein modernes Headless-CMS, wie GraphCMS, vollzogen.
Damit öffnet sich Tür und Tor für Bibliotheken wie Apollo zum Bedienen einer GraphQL-Schnittstelle.

Das Besondere an nuxt-apollo ist, dass es aktiv von der Community auf GitHub entwickelt wird.
Außerdem unterstützt es Server-Side-Rendering, welches unabdingbar für gutes SEO ist.

Axios

Ist mal keine GraphQL-Schnittstelle gegeben ist das nuxt/axios Modul eine perfekte Alternative, um auf RESTful-APIs zurückzugreifen. Wie nuxt-apollo unterstützt auch dieses Modul Server-Side-Rendering.

Eine umfangreiche Liste an verfügbaren Nuxt-Modulen findet man auf der eigens vom Nuxt-Team gepflegten Seite Nuxt Modules.