What is Nuxt.js? A Framework for Vue.js
Nuxt.js. If you know about Vue.js, if you heard about Vue.js, you have probably heard about Nuxt.js. But why it is so famous and what it can do?
In this episode, I'm going to deep dive into all these things of Nuxt.js and I'm sure after this video you will be excited to learn Nuxt.js.
So, what Nuxt.js is? Nuxt.js is a framework of Vue.js. But wait, Vue.js itself is a framework. If I go to vuejs.com, we can see it says a progressive JavaScript framework. So, this means Nuxt.js is a framework of framework.
But what is framework? So, framework is a tool to create a fast, scalable and manageable code. That's nice and why we need Nuxt.js over Vue.js? Because Vue itself is a family of various things like Vue.js itself, then VueX, Vue router, Vue renderer, Vue meta, everything.
So, in the Nuxt.js, we include all of these things and Nuxt manages everything very nicely. And that's why again, because it will help you to create a fast, scalable and manageable tool, it's a framework.
Key Features of a Nuxt.js Application
But why Nuxt.js is so good? What are the things it can do? With Nuxt.js, you can create a server-side rendering app. You can create a single-page application. You can also create static site generation like pre-rendered application.
And with the Nuxt.js, you can have plugins installed and used globally over the project. Yeah, Nuxt applications are SEO-friendly. That's most important part. Finally, you can use middleware to protect the authenticated content. That's very important part.
But among these, let's first talk about the static site generation. In Vue.js, a general component will look like this. We have a template for the HTML. There we have a script for our Vue.js or JavaScript part. We have a style for our styling of the HTML. And you can see this it is scoped. That means these styling is only going to work for this HTML. If you remove this scope, this style will be applicable to all of your project, which generally you don't want.
How Static Site Generation (SSG) Works
Come back to static site. So, whenever you create a static site, you create a pre-rendered application. Then all these things are combined and transformed into HTML file of this page.
Like here you have a pages or pages directory on your Nuxt application, then whatever you define inside the pages application will become the route. And here, about.vue, when you create static site, it will generate index.html for that. Because your server doesn't know how to render your Vue app, but yeah, server know how to render index.html file or actually browser know that how to render this HTML file. That's very nice.
So, if everything is pre-rendered, then what about if something changes? What about dynamic content?
So, let's say we have a e-commerce website. A user came to the website to add a product, but after that, that product is out of stock. Then just after that, another user came and he want to add that same product. But we know the product is out of stock, so we need to show that this product is out of stock.
Means we need to update our HTML. We need to re-render or regenerate the static page for that particular HTML file. But it will take some time, so Nuxt.js is smart enough that while this is generating the static HTML file for that particular content, it will provide the data from the API, from your e-commerce API. And then it will update the product details.
User doesn't know what happened behind the application. He just see that just after this, as soon as something changed, we have changed on the user end also. That's the power of static site with Nuxt.js.
The Power of Single-Page Applications (SPAs)
Let's talk about single-page application now.
So, what's the power of single-page application? Yeah, content loads only one time. That means everything like JS, CSS loads only one time. Then whenever you navigate to other page, it's less like changing of component and user feels like pages changing. Actually, the component is just changing, not the page.
Then yeah, because of that, the loading of pages is super fast because everything is just from the Ajax request. And because everything happens on the browser end, it caches everything on the browser. So, like JS and CSS are delivered at the time it require from browser, not from the server. So, that's the important point of having a single-page application. Because everything happens on browser, so we can effectively debug our application.
SPA vs. Traditional Request-Response Cycle
So, let's talk about normal request, then we can easily see that what is single-page application. In a normal request, we will visit a website, then request go to the server. Server response with the HTML file. Then browser read HTML and it will request for JS, CSS and other content. Then after that, server responded with all these things. This process happens for every request. Even if you change to /about, everything is going to repeat. And this will take time and that's why normal websites are slow.
But here comes our single-page application. Suppose we have a list and we will click on some somewhere, something happens or we navigate to some pages and that list is changed to like this. What's the difference between these two lists? You can see just the content is changed. Yeah, there's a shuffling of colors, but doesn't matter. The important point is the content, the text or we can say the data. So, on and all, we don't need to have the styling, we don't need to have the font or everything. We don't need HTML, we don't need styling, we don't need colors. We just need data to populate here.
And that's why single-page application comes into the picture. So, again, we will visit the website and the first time, yes, everything happens again, but as you navigate to another page, because everything like JS, CSS is on the browser, we just need the data to update. So, we will request the only data from the server or from the API. It will respond with the data and then we have this kind of structure. That means just the data is updated.
So, this is why we have single-page application with Nuxt.js.
Universal Apps: The Hybrid SSR and SPA Solution
But you know, single-page application also has some limitations like SEO optimization. When the Google crawler, Google bot crawls your website, because everything loads from the API, it just see a blank page. There's no change in meta, there's no change in head tags. So, there's a poor optimization of SEO for single-page application.
Then we have a secret security issue. Obviously, because of these things, we cannot escape to big things. So, to overcome all these limitations, we have a universal app. In a universal app, we have a pre-rendered data on the server and then all these things are come ready to serve like ready HTML to load.
Because everything is set on the HTML, we can easily manipulate the head tags like meta tags for SEO. That's why it is SEO-friendly and use Nuxt.js uses fetch and async function to create all these things for server-side rendering.
Demonstration: A Universal App in Action
So, in a universal app, again, we visit a website, we request data, but this time, because it pre-rendered everything, the HTML is having all these things like CSS and JS files included inside the HTML and the content. So, let me show you how universal is a combination of single-page application and universal application.
So, if I go to my website, you can see if I open my tab, if I just navigate to home page, on the network tab, let's clear everything. Now, let's go to blog. If I click on the blog, yes, you can see we have a Ajax request to fetch all the blog. But if I refresh this, you can see we don't have any request for getting the blog. Yeah, we have some kind of other requests, but we don't have that request to fetch the blog because these blogs are fetched from the server and all these things are already fixed inside our HTML and that HTML is served with the response. And that's why the universal app is a combination of normal application plus single-page application.
The 'Batteries-Included' Nuxt.js Ecosystem
So, what Nuxt.js includes? As I told you, it includes all the Vue.js family like Vue.js itself, then Vue router, VueX for state management, Vue server renderer, Vue meta. And to learn all these things, you can go to bitfumes.com/courses/vuejs.
It also include webpack. Webpack is a bundling tool. It will bundle all your JS, all your CSS into one file. But to know how you can bundle view related things, view components, we need to add view loader to webpack. Similarly, we are going to use ES6, ES7 type of things and to transform everything to lower ES or to normal JavaScript, we need a Babel transform and then Babel loader is also added to the webpack.
So all these things, like these things, these five things plus these three things are already configured, already included in Nuxt.js. So you don't have to worry about all these things. That's why Nuxt.js is super super cool.
Automatic File-System Based Routing
But among these things, the most important is view router. Because in the view router, if you familiar with view router, you need to create a router.js file. You need to register all the routes with the components, but not with the case of Nuxt.js. In Nuxt.js, you don't have to create any route. As you create a view file inside pages folder, that the name of the file will become your route. And if you want to create a dynamic route, you can prefix with underscore.
So let's understand this with this picture. We have a pages folder and inside I have created a folder called blog. Inside that blog, we have index.view. Whenever we have a index.view file inside any folder, that folder name will become the route. So the route is /blog.
Then we have a category slug. So underscore is there, that means it's a dynamic. So it will be like blog/blog name or blog slug. Then it will have index.view for that also. Similarly, if you go if you can see here, we have a about index.view, that means we have a route for /about. Similarly, we have a route for /contact. And here we have a route for /users/ the ID of user. And then whatever inside the view.js will be served, like /users/1, /users/2, like that.
So even if you name add.view, we don't want any index, just the add.view. /add is the route created.
Understanding the Nuxt.js Request Lifecycle
So all in all, how Nuxt.js is going to work. Our incoming request come to the Nuxt. It will first check, is there anything to serve on the server? Is there anything to do on the server? If yes, it will do and store that thing on the store. That means Vuex state management system that will store there. Then it will check for middlewares on the Nuxt.js config.js and it will match for with the with the layouts, load all the components and then validate with the user who is logged in or who is trying to visit things.
Then it will fetch some of the data from the server and then it will render the application for you or it will render the component for you. And whenever you navigate to other page, this process repeats itself.
So this is the thing, this is the why Nuxt.js is so cool. Everything is set up there. You don't have to configure anything. You just need to focus on what you want to create.
Conclusion & Getting in Touch
The time you spend on creating a router, the time you spend on having a Vuex state management system, the time you want to create on middleware system, these things are now minimized to zero and everything is set up with Nuxt.js. So that's why I'm very excited to learn Nuxt.js with you.
And if you want, you can just follow me on Twitter @bitfumes or you can follow me on personal Twitter account called Sarthak Savvy, s a v v y. You can also follow me on facebook.com/bitfumes and visit bitfumes.com for more advanced tutorial and real projects.
So we will meet in some other videos. Till then, goodbye.
