What is NuxtJS?
Nuxt JS is a library for VueJs. But what is VueJs?
Okay, that would be clarified, but what is NuxtJs now, and why do I need a framework (or rather a library) for a framework?
NuxtJs simplifies the development of VueJs applications, especially with regard to server side rendering. NuxtJs behaves to VueJs in the same way that NextJs does to React. So NuxtJs is a generator for static and server-side rendered applications and also has a few minor advantages. When using NuxtJs, the manual creation of routes and stores is no longer necessary, NuxtJs takes over this task for us automatically or at least more easily than in VueJs.
What is a “Universal App”?
A universal app should improve exactly that. Instead of sending an empty index.html, the application is “preloaded” and “prerendered” on the server.
NuxtJs and Universal Apps
Properties such as “isServer” and “isClient” can be set in NuxtJs and thus easily defined how and where these components of the page are rendered. Also of interest is the “asyncData method”, which virtually replaces the “data” known from Vue and calls up data in advance from other sources.
Static rendering of Vue apps
Another interesting thing about NuxtJs is “nuxt generate” which is set or called in the “nuxt.config” file. This command generates a complete static version of the website.
Automatic code splitting
By default, Nuxt offers a clear structure, which makes it easy to work with. Some of the common directories are:
- Components: as the name suggests, the Vue components are stored here.
- Layouts: The basic layout for all pages is specified here.
- Pages: Every site and sub-site can be found here. The router file is generated from this based on the folder structure and the data name.
- Store: Everything from the Vuex Store can be stored here.
Automatically created router file
By (correctly) creating the above-mentioned folder structure, the router file is created automatically. NuxtJs offers the possibility to create a folder for each page, in which the pages are then again named with index.vue. Dynamic pages are simply named with an underscore “_” and the path is automatically set in this way.
Someone has also thought of something for integrating fonts. However, this is initially more cumbersome than expected. One possible method that has worked for me is via its own dependency.
npm install --save-dev @nuxtjs/google-fonts
then there is a separate area in nuxt.config.js where the module has to be imported<strong>:</strong>
Now the desired font can be added<strong>:</strong>
Lato: [100, 300],
wght: [100, 400],
The introduction to NuxtJs gave me a lot of pleasure, especially the simple options that are available as standard. With my personal portfolio website, I was able to save a lot of work in order to have a fast and reasonably SEO-optimized website. When the switch to NuxtJs pays off for a typical smartphone app or web application is not yet clear to me. I also find it not quite obvious when I should use which functions of NuxtJs, and when SSR are really necessary.