Nuxt JS – The Best Vue.js Framework
Nuxt.js is a high-level framework created using Vue.js. It allows you to create ready-to-work web applications and is designed to simplify and speed up the development of universal and single-page applications. At the same time, it’s flexible enough, simply saying nuxt bring only advantages, and doesn’t ask for any compromises.
Nuxt.js is built to improve Vue.js. Therefore, they are not interchangeable. Vue.js can work without Nuxt.js, but the latter will not do without Vue. It is the basis for the easier creation of complex applications Vue, not intended for other frameworks.
Main Advantages of Nuxt
Fast Development and Runtime
Setting up a new nuxt project requires only on command a couple of minutes, nuxt handles all the routine, so you can just start coding, without and configuration.
Excellent Project Structure Out-of-Box
Even in a small Vue application, you control the code structure, at best, in several files. The default Nuxt.js structure gives you a great start for organizing your service in a scalable, but at the same time simple and logical form.
Here are a few basic directories with which are already configured and should be necessary and sufficient:
- assets – here all CSS/SCSS/LESS, as well as image and font files, should be placed;
- components – a folder that allows you to organize individual components Vue;
- layouts – a folder for placing the main application layouts;
- pages – the folder for storing the routes of your application. Nuxt.js reads all .vue files in this directory. Then it creates the routes of the application;
- store – the folder for storing all Vuex Store files in your application.
Universal Applications (Server-Side Rendering)
A universal application implies a SPA, but instead of a blank index.html page, you preload your creation onto a web server. Also, send the rendered HTML as a response to the browser request for each route. This helps speed up the load and improve SEO, making it easier for Google to crawl the page.
Creating generic services can be tedious since you need to do a lot of configuration for both the server-side and the client-side applications. This is a problem Nuxt seeks to solve for Vue. The framework makes it easy to exchange code between a client and a server so that you can focus on the logic of your application.
Will need to run two commands to get nuxt running in a production environment:
num run build – to build sources
npm start – to run the server
Generating Static Website
If your webpage doesn’t depend on any dynamic data, for example, a landing page, then static page generation is what you need. Nuxt will generate a static HTML file for each of your routes and place it in its file.
The advantages of this approach are very similar to the advantages of universal applications. There is a markup necessary to speed up the page load, as well as help search engines and social network crawlers to crawl the site. The difference is that you no longer need a server. Everything is generated during the development phase.
This is very powerful because you get the benefits of universal rendering without the need for a server. You can simply place your project on GitHub or Amazon S3.
For the static website, we won’t need a running server, so we’ll just to run:
Automatic Code Break
The framework will generate a static version of your site with the best webpack configuration so that for every statically generated page (route), it also generates its own JS file containing only the code needed to run.
Compiling ES6 / ES7 Without Extra Work
Out-of-box Development Server
Development with the participation of our today’s hero is very simple. It installs an automatic server update. While you are developing code and working on .vue files, Nuxt.js uses the Webpack configuration to watch the changes and re-compiles code automatically, also it has hot-reloading support by default.
Let’s Do Some Coding
Let’s set up a plain nuxt project and do a simple overview.
Creating a Plain Project
No configs required, nuxt handles all for you, what you just generate a plane project and start coding. If you have a vue-cli installed that you’ll need just a single command:
1 vue init nuxt-community/starter-template
The CLI will ask a couple of questions and will be ready in a minute.
Let’s install the project dependencies and run the development script:
This is how plain Nuxt project looks like, if you view the source code in the browser you’ll notice that the server returns a server-side rendered HTML instead of plain index.html.
If you open the pages folder you’ll notice a single index.vue file which contains the home page content. Lets create new plain page, pages/products/index.vue:
Ok, let’s check what we have on http://localhost:3000/products in our browser we’ll see the route automatically generated.
Nuxt also handles dynamic routes, so let’s create a single product page, pages/products/_id.vue:
_id specifies that the lats route path is dynamic, so if we go http://localhost:3000/products/10 it will render a dynamic view. The $route and $router options are automatically injected into nuxt components.
Nuxt handles the VUEX store generation as well, so we won’t need to install and configure it. What we need is to create a new file for every module, which will export state, getters, actions, and mutations. Just create a new products.js file in store folder.
Now let’s connect vuex store to the single product page:
Now if you click the link from products page you’ll see the single product page rendered dynamically as well, without refreshing the page, but if you do hard refresh you’ll receive the same HTML but rendered server-side.