If you’re building applications with Vue.js, you’ve probably heard of Nuxt.js. Vue already makes the development of JavaScript applications more convenient, but what’s the idea behind Nuxt.js?

It’s a progressive framework based on Vue.js. It simplifies the development of universal or single-page apps.

And this tutorial is all about, what Nuxt.js in detail is, which features you are getting, and how you can create your first project. Finally, you get an overview of the files and folder structure. There are some differences to a regular Vue.js project.

What is Nuxt.js

Nuxt is based on Vue.js official libraries. That means on Vue, the Vue Router, Vuex. And also on powerful development tools like Webpack or Babel, for example. It extends Vue.js by some helpful features, and only with a few extra kilobytes added to your JavaScript files.

Nuxt makes creating universal apps easier.

What is a universal app?

A universal app can execute on both the client and the server-side. If you create a single page application with Vue.js, you have a lot of benefits.

For example, you can make very snappy UIs that updates fast. But, and this is a problem, Google and other search engines struggle with them because there’s no content initially on the page to crawl for SEO purposes.

All the content is rendered with JavaScript after the fact.

And with a universal app, you have instead of an index.html without content, a preloaded app on a web server that sends rendered HTML for every route to speed up load times and improve SEO by making it easier for search engines to crawl the page.

The next benefit is you can prerender your app to a static website. That’s, in my opinion, the most significant innovation. You can create with the command nuxt generate a completely static version of your application.

npm run generate

It generates an HTML file for every route, and you have all the benefits of a universal app. But the difference is that you don’t need a webserver anymore. Everything gets generated during the deployment period.

It’s mighty because you get the benefits of universal rendering without the need for a server. You can host your app on GitHub Pages or a cloud service like Google Firebase. You could even host your website with Google Drive, without paying a single coin.

#nuxt #vue #javascript #developer