Nuxt.js: 28 kilobytes good for web developer

This Friday on Habré I read the introductory article about Nuxt.js, but summed up in the comments that it would not be enough. It so happens that we in Voximplant use this thing and it brings great benefits. Under the cut, I'll tell you about the "killer feature" of this micro-framework, and where it can be useful.

What is Nuxt.js? Briefly and for programmers

This is an add on Webpack. All that Nuxt does is configure Webpack so that it searches for specific files in specific directories, uses pre-configured libraries, and builds a one-page application.

Why is this necessary, if you can take a “bare” Vue.js, a “bare” Webpack, write a few lines of configuration and get a one-page application at the output? For the simple reason that the output we will not get any application. We’ll get a healthy javascript piece that, if somehow added to a web page, will create an interface there using Vue. Where does this page come from, how will JavaScript get there - we will need to do this ourselves. And we will need to configure the work with pictures and css, add and configure the router, something to manage the state and so on. In general, not a couple of minutes task.

Nuxt does quite a lot for us. It is enough to place the “index.vue” file with the component in the “pages” directory - and we have a one-page application ready. Which can be run in debug mode with the “nuxt” command and opened on “localhost”. Almost the same can be “bare” Vue with a Webpack, but even in such a minimal example Nuxt is already beginning to help us “under the hood”: Hot Reloading is turned on from the box, encodings, headers and everything else are configured for the pages.
')

Useful stuff

The debugging “Hello world” on Nuxt is not much different from it on the “bare” Vue plus Webpack. The benefits increase as the project ceases to be hello world and clutters pages with code. Everything Nuxt does can be implemented in several lines, but several dozen times a few lines of code, plus debugging is not as little time as it seems. What benefits does Nuxt bring:

1. Routing

The project has already configured vue-router , all that is needed is to place the .vue files in the root director of the project. Each file will be available in the server dev by url corresponding to its name, that is, “pages / foo.vue” will be given as “ localhost : 3000 / foo”. For sales, as it should be with vue-router, all this will turn into either hashes, or you will need to configure the server to give the application from any url.

Dynamic paths are supported out of the box: subdirectories and files starting with an underscore will serve pages with any lines instead of underlined elements, and the meaning of these lines will be transferred to the components. For example, the pages / objects / _id.vue component will display both localhost / objects / 100 and localhost / objects / bar . What exactly is displayed inside the component via $ route.params is what vue-router does. Nuxt also adds a validate method with which the component can check the validity of the path passed to it.

2. Work with statics

Nuxt configures the Webpack to search for images and other statics in the “assets” root directory and, during the build process, puts it into a special _nuxt directory, from where it will take all the web page. From the static code is available using the alias "~ assets", Nuxt configures the Webpack so that the "~" points to the project root.

3. Work with meta-information

HTML-pages created by Nuxt are fully configurable by the developer: using nuxt.config.js, you can set the page name, meta information, add additional styles, fonts, and so on. Conveniently, this is all done in one line of code:

4. ES2017 out of the box

One of the features of Vue is the ability to use “single file components” with almost any language for the template, styles and code. Usually I use PUGs to draw HTML, Stylus for modular styles (yes, like the old Pythonist I like indents) and TypeScript for code. In the Nuxt project, this is exactly the same, but out-of-the-box JavaScript is translated using Babel from the ES2017 syntax. Which is very convenient for most small tasks.

And finally, the killer feature

All of the above does not pull on the use of another technology. In a good way, this is a question of your own template for vue-cli with the settings of the Webpack and the folder structure that you prefer. But Nuxt has one feature that makes its use more than appropriate. Meet: nuxt generate !

This command does Server Side Rendering out of the box. After its execution, we will get the “dist” directory, which will contain the “index.html” and that “_nuxt” directory with the generated images, css, javascript - in general, all that is needed for our site. And this is all static. That is, you can distribute from a CDN or upload to GitHub Pages.

Server Side Rendering is not easy to configure. Unlike the small amenities that Nuxt offers, setting the SSR properly is not a one-hour issue. And Webpack is simple only for simple projects, SSR doesn’t. Nuxt does everything for us - the right settings, the right plugins, the splitting of the code into loadable modules and much more. An HTML page with styles and images is loaded from CDN very quickly, after which it slowly takes JavaScript and executes it. When executing the code, the process of “dehydration” occurs: Vue, having built a component tree in memory, studies the existing DOM from HTML, sees that it corresponds to the existing components, does not change anything, and the application just “comes to life”. Just in one or two seconds that the user needs to want to click somewhere.

Where Nuxt is applicable

We use it for quick prototyping of interfaces: in general, nothing superfluous, configured Hot Reloading, you can transfer the results in a few seconds to GitLab Pages (we have a local GitLab with CI, very convenient) and show it to someone.

Nuxt is very good for project pages on GitHub and GitLab - unlike Jekyll and other static generators, you use the full-fledged Vue framework, you have JavaScript, routing - you can at least make Photoshop an analog and distribute it with GitHub Pages or CloudFlare.

The authors themselves hint that Nuxt can be used to speed up projects where reading information is more often than changing it. Take, for example, the main Habra. It can generate Nuxt and give away instantly. And in the background, constantly reassemble the statics so that articles, comments and other “dynamic” information are updated every few seconds. Nuxt allows you to configure a statics generator for dynamic paths: you ship it a list of elements, and it creates as many individual html files as you need. Yes, the static for an online store with a million products will be generated in half an hour. But after all, goods are not added there every minute! But the pages will be given instantly. Any number of users, if you use a CDN. The situation “the server did not cope with the load” simply ceases to be. Well, except for the backend, of course. But there is its own atmosphere.

The picture for attracting attention is taken from the site vitaminius.ru