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/
By profession I am a Frontend Developer at Openweb Solutions.
