Nuxt.js - Der Static Site / Onepage Allrounder

Da ich es erst gestern wieder verwendet habe, will ich euch heute was über Nuxt.js erzählen.
Nuxt.js ist im Wesentlichen ein Tool, um Vue.js serverseitig zu rendern. Ein dementsprechendes Deployment ist relativ einfach möglich. Doch kannst du das Projekt auch als eine Onepage App mit statisch vorgerenderten Seiten, sowie als eine klassische Vue.js App exportieren. Auf der Projektseite ist das noch etwas prägnanter beschrieben:

Our goal is to create a framework flexible enough that you can use it as a main project base or in addition to your current project based on Node.js.
-- https://nuxtjs.org/

Ohne Vorwissen über das spätere Deployment kannst du also schon dein Projekt starten. Das erlaubt eine sehr große zeitliche Flexibilität und Agilität.

Dank der vue-cli kannst du ein nuxt.js Projekt auch schnell aufsetzen. Die daraus erzeugte Ordnerstruktur ergibt Sinn und erleichtert dir die Projektorganisation enorm.

Nuxt.js presets all the configuration needed to make your development of a Vue.js Application Server Rendered more enjoyable.
-- https://nuxtjs.org/

Wenn das Projekt generiert ist, kannst du die wichtigsten Einstellungen für dein Projekt und Build in der nuxt.config.js treffen. Hier entscheidest du, ob beispielsweise das CSS minimiert werden soll oder was in den Meta Tags steht.

Danach kann es losgehen. Das Prinzip von nuxt sieht vor, dass du Layouts baust, in dene sich die von dir erstellten Seiten befinden. Dazu gesellen sich Assets, Middlewares, plugins, statischer Content (Bilder, ...) und Vuex Stores.

Nuxt stellt auch einige Befehle bereit. Mit npm run dev startest du einen Liveserver, der den aktuellen Stand des Codes wiederspiegelt. Mit npm run build kannst du einen Production Build anstoßen. npm run generate generiert dir dein Projekt als statische Seite in den /dist Ordner.

Möchtest du mehr über Nuxt.js erfahren? Dann empfehle ich dir die Dokumentation.

Hast du schonmal mit Nuxt.js oder Vue.js gearbeitet? Schreibe doch mal deine Meinung in die Kommentare! :)