What is Nuxt.js?



Nuxt.js is a framework for creating Universal Vue.js Applications.

Its main scope is UI rendering while abstracting away the client/server distribution. It is used to create a framework flexible enough that you can use it as a main project base or in addition to current project based on Node.js.

Nuxt.js presets all the configuration needed to make development of a Vue.js Application Server Rendered more reliable.

As a framework, Nuxt.js comes with a lot of features to help a development between the client side and the server side such as Asynchronous Data, Middleware, Layouts, etc.


Features of Nuxt.js


Write Vue Files (*.vue)

Automatic Code Splitting

Server-Side Rendering

Powerful Routing System with Asynchronous Data

Static File Serving

ES6/ES7 Transpilation

Bundling and minifying of your JS & CSS

Managing <head> element (<title><meta>, etc.)

Hot module replacement in Development

Pre-processor: Sass, Less, Stylus, etc.

HTTP/2 push headers ready

Extending with Modular architecture


Create a Nuxt JS application


Creating a Nuxt.js application from scratch is also really easy, it only needs 1 file and 1 directory. Let’s create an empty directory to start working on the application:

$ mkdir <project-name>
$ cd <project-name>

The project needs a package.json file to specify how to start nuxt:


    “name”: “my-app”,

    “scripts”: {

         “dev”: “nuxt”



scripts will launch Nuxt.js via npm run dev.


Once the package.json has been created, add nuxt to the project via npm:

npm install –save nuxt


The pages directory


Nuxt.js will transform every *.vue file inside the pages directory as a route for the application.

Create the pages directory:

$ mkdir pages


then create the first page in pages/index.vue:


    <h1>Hello world!</h1>



and launch the project with:

$ npm run dev


The application is now running on http://localhost:3000.


That’s it, How cool this is. This is an initial way of creating a Nuxt js project.

Hope you like it and please don’t forget to share.


Source courtesy : https://nuxtjs.org/