# Nuxt.js - Quick Introduction
Vue.js app development just got better! We got Nuxt.js now!
Nuxt.js helps you with the SPA part. It adds two major features to Vue.js:
- Server-side rendering out of the box
- Declarative configuration by using folders and files to structure your projects and specifically your routes
Let’s dive into these two concepts real quick:
# An Introduction to Server-side Rendering
Server-side rendering fixes this issue. You still end up with a single page application but on first load, the page is rendered on the server. You could call this “pre-rendering on-the-fly”. If a user visits
index.html file with the pre-rendered content would be returned. Subsequent navigation within your app would again be handled in the browser. Additionally needed data (e.g. on a different page/ route) would again be fetched asychronously behind the scenes.
This greatly improves SEO since the crawler essentially always sends a new request for each of your pages (it doesn’t navigate within your app by clicking links etc) and hence it always receives a pre-rendered version of the page.
A crawler could suddenly see all the nice content of your page:
# Configuration via Folders & Files
nuxt.config.js) and a bunch of folders and files. As you can see, there are quite a lot of folders. You can dive deeper into the meaning of all these folders, but the core takeaway is that you configure the entire routing by placing
.vuesingle-file components in the
pagesfolder. The other folders are then used to create non-page components (=>
assetslike images, define
middlewarewhich should be executed before a route is loaded etc.
By following this approach, you actually don’t have to configure a lot to end up with a working Vue.js application. You simply re-create your planned app structure as a directory of folders and files!
# Nuxt.js & Vue.js - What’s happening behind the Scenes
You learned about the two core concepts Nuxt.js adds to Vue.js.
If you look closely, you’ll notice that neither of the two concepts affects the features you use in your Vue.js apps.
You still work with
computed properties, you can still use Vuex, you still create
.vue components with
Nothing changed regarding that! You still build Vue apps for the same purposes you built them before.
But now the development process is easier (thanks to the implicit configuration) and the deployed app is more powerful (thanks to server-side rendering and improved SEO).
And that’s how you should think about Nuxt.js: It supercharges your Vue apps. It doesn’t actually add much to the runtime app, it instead simplifies the development process and makes server-side rendering a breeze.
This also of course means that the bundle you ship to your users - the JS code they have to download - only grows very slightly.
# Why would you NOT use Nuxt.js?
With all these new concepts and advantages outlined, what would be reasons speaking against using Nuxt.js?
Here are some possible reasons you could bring up:
- I don’t need SEO, I’m happy with a traditional SPA
- I want to configure my routes manually
- I don’t want to add a single kb to my final bundle
- I don’t want to have yet another dependency in my project
Are these valid reasons?
- Even if you just want to build a “normal” SPA, you can do that with Nuxt.js and take advantage of the “configuration by folders and files” approach. You can actually set the build mode of Nuxt.js apps to
universal) in the
nuxt.config.jsfile. By changing the mode, a normal SPA is created once you build the app.
- Fair enough, but besides the fact that you can re-build any route config with the folders & files approach, you can even set your own programmatic route config in Nuxt.js.
- Okay, if adding a bit more code to the final bundle is an absolute no-go, you can’t use Nuxt.js.
- It can indeed be frustrating to see how many dependencies modern frontend projects have. Nuxt.js is one of the better ones though.
# Dive Deeper!
I hope this article got you interested in Nuxt.js and I also hope that I could explain it’s core ideas. Definitely share your feedback (button at the beginning of the article) with me!