Einstieg in NuxtJS

Von Florian Mayr am 17.09.2021

Was ist NuxtJS?

Nuxt JS ist eine Library für VueJs. Aber was ist VueJs?

VueJs ist ein Frontend JavaScript Framework welches in der letzten Zeit immer mehr an Beliebtheit gewinnt. VueJs wurde von Evan You, einem Entwickler, der damals an Angular-Projekten arbeitete, entwickelt. Angular empfand er für kleine und mittlere Projekte zu komplex. VueJs war zuerst ein Nebenprojekt welches Ähnlichkeiten zu Angular hat. Später wurden Teile von React wie Routing und State Management übernommen.

Okay das wäre geklärt, aber was ist jetzt NuxtJs, und warum brauche ich ein Framework (oder besser gesagt eine Library) für ein Framework?

NuxtJs vereinfacht die Entwicklung von VueJs Applikationen besonders im Bezug auf Server Side Rendering. NuxtJs verhält sich zu VueJs etwa so wie NextJs für React. Also NuxtJs ist ein Generator für statische und serverseitig gerenderte Anwendungen und hat zusätzlich dazu noch einige kleinere Vorteile. Bei der Verwendung von NuxtJs ist das manuelle Anlegen von Routes und Store nicht mehr notwendig, diese Aufgabe übernimmt NuxtJs für uns automatisch oder zumindest einfacher als in VueJs.

Universal Apps

Was ist eine „Universal App“?
Eine Universal App wird beschrieben als JavaScript Code, der am Client und am Server ausgeführt werden kann.

Moderne JavaScript Frameworks wie Vue ermöglichen das Erstellen von Single Page Applikationen, welche viele Vorteile bieten. Nachteile von SPAs sind mögliche lange Ladezeiten und dass die Seiten anfangs leer sind. Die Seiten werden mit JavaScript befüllt, was für Probleme bei Googles Webcrawlern sorgt und somit für SEO nicht optimal ist.

Eine Universal App soll genau das verbessern. Statt eine leere index.html zu senden, wird die Applikation am Server „preloaded“ und „prerendered“.

NuxtJs und Universal Apps

In NuxtJs können Properties wie „isServer“ und „isClient“ gesetzt werden und damit einfach definiert, wie und wo diese Komponenten der Seite gerendert werden. Ebenfalls interessant ist die „asyncData method“ welche die aus Vue bekannte „Data“ quasi ersetzt und Daten vorab von anderen Quellen abruft.

https://nuxtjs.org/docs/concepts/context-helpers

Statisches rendern von Vue Apps

Ebenfalls interessant an NuxtJs ist „nuxt generate“ welche im File „nuxt.config“ eingestellt bzw. aufgerufen wird. Dieser Befehl generiert eine komplette statischer Version der Website.

Automatisches Code Splitting

NuxtJs erstellt für jede Page die statisch generiert ist auch ein eigenes JavaScript File mit nur dem Code, der auch wirklich benötigt wird. Das kann ebenfalls ein Vorteil sein für die Geschwindigkeit der App.

Struktur

Nuxt bietet standardmäßig eine übersichtliche Struktur, welche es einfach macht, damit zu arbeiten. Einige der üblichen Verzeichnisse sind:

Components: wie der Name schon sagt, werden hier die Vue Komponenten abgelegt.
Layouts: Das Grundlayout für alle Pages wird hier festgelegt.
Pages: Jede Site und SubSite ist hier zu finden. Anhand der Ordnerstruktur und des Datenamens wird daraus das Routerfile generiert.
Store: Hier ist alles vom Vuex Store abzulegen.

Automatisch erstelltes Router File

Durch das (richtige) erstellen der oben genannten Ordnerstruktur wird das Routerfile automatisch angelegt. NuxtJs bietet die Möglichkeit für jede Page einen Ordner anzulegen, in dem dann die Pages wieder mit index.vue benannt werden. Dynamische Pages werden ganz einfach mit einem Unterstrich „_“ benannt und so wird automatisch der Pfad so gesetzt.

Fonts

Auch für das Einbinden von Fonts hat sich jemand etwas überlegt. Jedoch ist das anfangs umständlicher als erwartet. Eine mögliche Methode, welche bei mir funktioniert hat, ist über eine eigene Dependency.

Erster Schritt
npm install --save-dev @nuxtjs/google-fonts

dann gibt es einen eigenen Bereich in der nuxt.config.js wo das Modul importiert werden muss:
{
  buildModules: [
    '@nuxtjs/google-fonts'
  ],
}

Jetzt kann der gewünschte Font hinzugefügt werde:
googleFonts: {
  families: {
    Roboto: true,
    'Josefin+Sans': true,
    Lato: [100, 300],
    Raleway: {
      wght: [100, 400],
      ital: [100]
    },
  }
}

https://google-fonts.nuxtjs.org/setup

Fazit

Der Einstieg in NuxtJs hat mir viel Freude bereitet, besonders die einfachen Möglichkeiten, welche standardmäßig zur Verfügung stehen. Bei meiner persönlichen Portfolio Website konnte ich mir somit einiges an Arbeit ersparen, um eine schnelle und halbwegs SEO optimierte Website zu haben. Ab wann sich der Umstieg zu NuxtJs bei einer typischen Smartphone App oder Webanwendung auszahlt, ist mir noch nicht ganz klar. Ebenso finde ich es noch nicht ganz einleuchtend, wann ich welche Funktionen von NuxtJs verwenden soll, und wann SSR wirklich notwendig sind.