facebook

What is Nuxt.js?

By Preetam Mallick

banner

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:

<template>

    <h1>Hello world!</h1>

</template>

 

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/

 

Preetam Mallick Administrator
Frontend Developer , Openweb Solutions

By profession I am a Frontend Developer at Openweb Solutions.

Frontend developer at Openweb Solutions
Posts created 14

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
shares