Entry into NuxtJS

0

What is NuxtJS?

Nuxt JS is a library for VueJs. But what is VueJs?

VueJs is a frontend JavaScript framework which has been gaining popularity recently. VueJs was developed by Evan You, a developer who was working on Angular projects at the time. He found Angular too complex for small and medium-sized projects. VueJs was first a side project that has similarities to Angular. Parts of React such as routing and state management were later taken over.

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.

Universal apps

What is a “Universal App”?
A universal app is described as JavaScript code that can be executed on the client and the server. 

Modern JavaScript frameworks such as Vue enable the creation of single page applications, which offer many advantages. Disadvantages of SPAs are possible long loading times and that the pages are initially empty. The pages are filled with JavaScript, which causes problems for Google’s web crawlers and is therefore not ideal for SEO.

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.

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

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

NuxtJs also creates a separate JavaScript file for each page that is statically generated with only the code that is really needed. This can also be an advantage for the speed of the app. 

structure

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.   

Fonts

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.

<strong>Erster Schritt</strong>
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>
{
  buildModules: &#91;
    '@nuxtjs/google-fonts'
  ],
}

Now the desired font can be added<strong>:</strong>
googleFonts: {
  families: {
    Roboto: true,
    'Josefin+Sans': true,
    Lato: &#91;100, 300],
    Raleway: {
      wght: &#91;100, 400],
      ital: &#91;100]
    },
  }
}
https://google-fonts.nuxtjs.org/setup

Conclusion

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. 

Share This:

Leave A Reply

Powered by FrontNet