How Nuxt simplifies Vue.js development

By | August 28, 2019


– So we’re still here
at the Prismic studio, and in the first video we talked with Sébastien Chopin about Vue.js. – Yeah – Right? And we discussed how it is easy to start with because you can start like, more or less you said like jQuery. – jQuery, ya. – And then you add more on top of it until you get a single page app. – Yeah. – And that’s what’s nice about Vue, the fact that you can, the onboarding is very– – Easy. – Fluid? – Yeah. – Fluid. And it’s opinionated, so
you don’t have to search a lot for adding things,
they are by default, router, and other tools that you will need for your project. – Yeah, exactly. – This video we thought
of doing about Nuxt, which you created. – Yeah, with my brother at first. – With your brother. – Yeah. – OK, so first can you go
quickly on why did you create, I guess you mentioned in the last video that there is the part where
you take a Vue component, and you package it? – Yep. – And there are different ways to do that? – Yep. So, one of the ways is to configure Webpack by yourself. You can use some templates. So back then, it was two years ago, two and a half years ago, the starter of Vue.js,
you had a build directory with the a whole Webpack configuration. So you had to understand
Webpack, how it works, or you could ignore these project. But as soon as you have to
update, upgrade Webpack, you will have to update
these configuration, and this can be pretty hard for newcomers. And this is also why I was really enthusiastic about creating Nuxt. It was to abstract all of the bundling configuration into Nuxt. Because most of the application,
and of the Vue file, you will need the same configuration 90% of the time. So we decided to take this configuration, trying to have to best
configuration for the Vue project. And if you want to extend
it, you can extend it. – So basically make a, by
default, configuration– – Yes. – That works from most of the cases, but you still allow extensibility on it. – Yes. – So that what Nuxt is. – So that was the first part. The bundling, the Webpack part, was one of the most complex part. And the second one was to be able to create pages really simply, by just creating a file
inside these pages directory. And like in PHP, you have an index.vue file for the homepage. And you can create about.vue, and it would be, /about. And then you can create a directory inside these directory, and etc. – OK, so let me just try to summarize, sum up me learning from this. First, Vue is easy because you can start with your HTML, and then you add IDs, and then you make them components. – Yes. – And then you can add routing. And then you wanted to make the packaging of these components easy. – Yeah. – To make them into, to kind of build them into JavaScript files. – Yes. – You did a configuration that works for most of the cases, and
that was one part of Nuxt. – Yes. – And the other part is to make some kind of, by default structure, like PHP, where a file is a page. – Yes. – File corresponds to a page. – So, the idea is when you create Vue application from scratch, and you want to handle routing, you have to have to
create a router.js file. And inside this file you will have to declare all of your routes,
and import the component, and if you go inside the performances, that will tell you that you
have to code split your pages, your component that you import. So it was, it’s a lot of knowledge to have for something that could
be abstracted for the user. – And that’s what you did. – Yes. – I mean you, with your brother. – Yeah. – So basically, Nuxt is about making all these guidelines and best practices– – Best practice, yeah. – Package them into a
framework, which is Nuxt. – Yeah. – And tell people, just
structure your project, one file per page, and we
will do all the other stuff. – Yes. So, with Nuxt we’re
trying to give a structure where you don’t have to think about how you have to structure your project, how you have to configure. We give you a default structure, and by following this convention you can create a simple app, to really complex application. By respecting best
practices, and performances. – And mostly when you start, for instance, building a website, or an app, there is a lot of complexity that is not related to what you are trying to create, but rather, organizing stuff, getting
the router working, mapping, “OK this router is for this page, this file for this component”, and so on, and so on. You kind of abstract all of that, so that people can focus on, on– – On creating the content, ya. – Creating content. But there is also the server
rendering side of Nuxt. – Yeah, that’s how people knew Nuxt.js. We also use the Vue server render module that allows us to server render your page. – So if we get back to the picture, so, a Vue app runs on the browser. – Yes. – Do you agree? – Ya. – Right So, in Nuxt you can server render your components? – Yeah. – Why would you do that, first? – There is multiple reason. The first one will be for SEO. This is really important for SEO. When you’re the robot, the Google crawler, or any kind of crawler go to your page, if it reads HTML it’s
able to understand it. If it sees nothing in JavaScript file, then it will have to load the website. And there is a study talking about the crawler of Google, that when it sees only a
single page application, it will delay this crawling part, when it will have more performances. – More resources. – Yeah, more resources. – OK so, basically if you
don’t want to, kind of, risk your SEO because
you’re delayed for crawling. You go on, generate it on the server side. – Yeah. That’s one bonus of server side rendering. – So if I have a Vue app, and I, like I made it in Nuxt way, so in this structure that is by default, do I have to do much to
get the server rendering, so that, SEO, so that I gain from SEO? – If you started with Vue, without Nuxt, it will be a bit harder, since you will have to
import Vue server render, configure, create the bundle renderer, make sure you configure two webpack, one for client and one for server. And also make sure that the plug-in you import are working,
also for the server side. – What if I start with
Nuxt since the beginning, is there any setup to
make it server rendering? – No. You can directly create the Vue file, and get started quickly. – Right, you talked about different advantages to server rendering. Do you see any others? – Yeah. The second one will be a
first time to interact. So, instead of having a white page when you go to single page app, where you have an index.html, with just a loading screen, and then the JavaScript is parsed, and then executed, and then you can see the content. Maybe it’s fetching an API. – Of course, ya. – And then you, like a Prismic
API to get the content, and then you can see the home page. With the server side rendering, this happens inside the server directly for the first request. And then we send back the HTML, and with this HTML we
send the JavaScript files, only for this specific
page, and the full app. But the other page won’t
be given as Javascript. So you will have the
minimum JavaScript given, so, really small, the smallest JavaScript possible to make it work. – Mm Hmm. – So you, you will see the content. The browser will display
because it knows HTML, it knows CSS, so it can
display it on your device. And then– – So to sum up, just until here, and we’ll not forget to get back to it, but, I type the first time
on my browser, the page. – Ya. – Instead of having a
JavaScript app that will load, and start rendering, calling APIs. – Ya. – You’ll get it right away, content. – Yes. – Right? – You see something– – And it’s capable of
functioning as an app– – Exactly. – As a client side app. – So, if you click on
a link, for instance, where the JavaScript is not loaded yet, you will go like a normal page. It would reload the page,
go to the next route. But if, in the meantime,
you were just scrolling, the JavaScript is downloaded, parsed, and then executed, Vue will mount, there
is a mounting process, where it will directly connect all the element with a JavaScript app. And then it will become fully interactive. So when you will navigate
from a page to another one, it will be only on client side. – Right. – So the server will not be called anymore for the server side rendering. – Right, so it’s only for the first user, and that will improve the
overall user experience. – Exactly, that’s the point. This is why I also love
server side rendering, because the user experience,
for me, is the best. You get the content, you can scroll, and you can directly start interacting when the JavaScript is loaded. – So basically the best of both worlds. – Yes. – You get the interactivity
of having a client side app, so you don’t get to full refresh when you innovated between pages. – Exactly. – But still, the first load of the page you don’t have that
loader, or the blinking of different components– – You have the content right away. – You have, right away, the page, nice. Now if I, basically, if I need to call APIs in Nuxt, for showing content, where do I do that? In the components? Somewhere else? – So, if you use only Vue, you will usually call this API in the hook, in the Vue hook, for instance, beforeMount(). So you will call this
API, get the content, and then set the data of the component that will be displayed
inside the template. With Nuxt we created a new hook, called asyncData, that will be called before rendering the page. So you can get the data from your API, set the data of your component, and then Nuxt will wait
for asyncData to be done. So it’s an asynchronous function, and when it’s done, we
will render the page. – Right, so you have
a place where you have to do that call, and you know how to wait for that call to be ended– – Yes. – So that you do the loading properly. – Exactly, on the server
part, and also on the client. So it’s the same card
for server and client. It’s an asyncData for the pages, and when you will navigate I will also wait for the next page asyncData to be done before showing the page. – So that’s another thing that Nuxt manages for you, so that you don’t have to manage it manually. – Yes. – Between loading data, and the loaders that you have to do, that’s managed as well by Nuxt. – Ya, we have a progress bar, automatically that is
connected to asyncData. – Nice. – So you can focus
right inside the design, and the content of your page. – Nice, you know, and
here’s one thing that maybe, and I will get us into
some kind of debate, but, some people see Nuxt as an equivalent to Next, on React. So Nuxt on Vue, as the equivalent to Next on React. – Yeah. – Is it true? – Well that’s, that’s how I started, two and a half years ago, when I seen Guillermo article, I was already working on an application with Vue, and server side rendering. And I really liked these pages directory. And it remind me of project
I created one year before, it was called PGS, and
it was like PHP files, but with JavaScript. – Uh huh. – And I really liked this syntax, and I’ve seen, oh, there is a project doing server side rendering, and respecting these kind of PHP files. – Simple structure, ya. – So I was like, OK, I will do the same Webpack integrated. And that’s how we get started. So, there is similarities
between these two project, but quickly we moved– – Within the generate
part, for static exporting, to hosting the CDN, we managed to have the
single page app mode. So to remove the server side rendering– – But then Next, got also the export after the generate you did, right? – Ya. – They did the export. – I think we inspire each other, and that’s what is good. – Ya, that’s always how it happens, right? – In open source. – Ya, cool. Well, maybe in next videos, we call about some kind of plugin system that you have, modules, right? – Yeah, the modules, yeah. – We’ll talk about that. – Yeah. – Thank you.

2 thoughts on “How Nuxt simplifies Vue.js development

  1. Александр Дергунов Post author

    Thank you. Nuxt.js is awesome!

    Reply
  2. Chanel Greco Post author

    I‘m new to Prismic and have been watching some of your videos. Thank you and keep up the good work.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *