Nuxt features you will love as a Vue.js developer
Nuxt is a framework built on top of Vue in order to create universal applications. Basically, it’s following the convention over…
[Learning Nuxt]
Nuxt features you will love as a Vue.js developer
Nuxt is a framework built on top of Vue in order to create universal applications. Basically, it’s following the convention over configuration principle which makes it easy to get started but powerful for any application size.
Nuxt requires a change in mindset because you need to take into account that during the initial render, the code will be running on the server-side. But it provides a lot of SEO, performance, and development experience improvements, which make working with it a joy. Let’s dive into them.
Bootstrapping — Create Nuxt app
It’s a common practice, in modern application development to have a tool that will help you configure and bootstrap the application easily. Nuxt comes with create-nuxt-app that makes this a piece of cake. You can have your local server up and running in minutes with all your preferred configurations like UI framework, linting, testing, and many more.
Docs
No matter which tool you use, you will always feel more confident when you understand how it works under the hood. The official Nuxt docs follow the Vue docs paradigm and explain everything with details and a well-paced speed.
Additionally, there are a lot of simple and advanced examples to demonstrate real-life patterns and scenarios which helps a lot to put all the pieces together.
Community
Nuxt has a vibrant and welcoming community at discord which is probably the best place to stay up to date, meet new people and get help if needed.
Vue router
When working with the Vue, you have to set up and configure routing manually which usually feels like a chore. Nuxt automatically generates the vue-router configuration for you, based on your provided Vue files inside the pages directory. Basically creating the file pages/about.vue will automatically serve its contents at /about. You just need to follow some conventions if you need dynamic or nested routes. The best thing is that Nuxt will automatically code-split all routes for you.
Component discovery
In the same fashion, components can also be automatically imported, which makes development much faster. Nuxt will scan the components folder for every element encounters in every template. If you want to make a component loaded asynchronously you just need to prefix the name with the Lazy keyword. This eliminates the risk of importing components you don’t actually use.
Smart prefetching
Nuxt.js automatically includes smart prefetching. That means it detects when a link is visible, either in the viewport or when scrolling, and prefetches the JavaScript for those pages so that they are ready when the user clicks the link. Nuxt.js only loads the resources when the browser isn’t busy and skips prefetching if your connection is offline or if you only have 2G connection.
Built-in SEO titles
Having a unique and descriptive meta title for each page is essential for good SEO. Having duplicate content can have a negative impact on your web pages in search results. Nuxt leverages vue-meta which provides an easy way to set dynamic meta tags per page or layout.
No webpack configuration
Webpack is the most popular and powerful bundler but often is what drives people without much experience away from modern frameworks. Nuxt encapsulates all the complexity behind simple commands but also lets you [inspect and modify the webpack config](https://nuxtjs.org/docs/2.x/get-started/commands#webpack-config-inspection) for advanced usages if needed.
Additionally, webpack loaders are doing optimizations without any effort
file-loaderlets you designate where to copy and place the asset file, and how to name it using version hashes for better caching. In production, you will benefit from long-term caching by default!url-loaderallows you to conditionally inline files as base64 data URLs if they are smaller than a given threshold. This can reduce the number of HTTP requests for trivial files. If a file is larger than the threshold, it automatically falls back to file-loader.
Preprocessors
Using vanilla HTML or CSS in a modern application is very rare nowadays. Using a preprocessor to improve readability, maintainability and the language itself with additional features is the norm. Adding one in Nuxt is as easy as providing a lang attribute in the template or style section.
Loading
Nuxt.js gives you its own loading progress bar component that’s shown between routes. You can easily customize it, disable it, or even use your own loading component.
Critical CSS
Part of performance optimization is making the required styles for above-the-fold content available as soon as possible and deferring the rest of the styles to be loaded later. This is handled automatically by Nuxt prerenderer and has a big impact when optimizing FCP and LCP performance metrics.
No magic included
A lot of things come configured by default and a lot more is happening with a simple configuration change. If you want to look under the hood you can inspect the .nuxt folder at the root of your project. This is what Nuxt has generated based on your code and configuration. This is very helpful in order to understand and possibly optimize the code that is delivered to the clients.
Conclusion
Everything feels like home in Nuxt if you are already familiar with Vue.js. The additional features improve performance, SEO, and the overall development experience which make Nuxt a safe bet for enterprise applications or when bootstrapping something new. Have fun!
