<\/p>\n
Nuxt.js is a framework for creating Universal Vue.js Applications.<\/p>\n
Its main scope is\u00a0UI rendering<\/strong>\u00a0while 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.<\/p>\n Nuxt.js presets all the configuration needed to make development of a Vue.js Application\u00a0Server Rendered<\/strong>\u00a0more reliable.<\/p>\n As a framework, Nuxt.js comes with a lot of features to help\u00a0a development between the client side and the server side such as Asynchronous Data, Middleware, Layouts, etc.<\/p>\n <\/p>\n <\/p>\n Write Vue Files ( Automatic Code Splitting<\/em><\/p>\n Server-Side Rendering<\/em><\/p>\n Powerful Routing System with Asynchronous Data<\/em><\/p>\n Static File Serving<\/em><\/p>\n ES6\/ES7 Transpilation<\/em><\/p>\n Bundling and minifying of your JS & CSS<\/em><\/p>\n Managing\u00a0 Hot module replacement in Development<\/em><\/p>\n Pre-processor: Sass, Less, Stylus, etc.<\/em><\/p>\n HTTP\/2 push headers ready<\/em><\/p>\n Extending with Modular architecture<\/em><\/p>\n <\/p>\n <\/p>\n Creating a Nuxt.js application from scratch is also really easy, it only needs\u00a01 file and 1 directory<\/em>. Let’s create an empty directory to start working on the application:<\/p>\n $ mkdir <project-name><\/em> The project needs a\u00a0 { <\/em><\/p>\n \u00a0 \u00a0 “name”<\/span>: “my-app”<\/span>, <\/em><\/p>\n \u00a0 \u00a0 “scripts”<\/span>: { <\/em><\/p>\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0“dev”<\/span>: “nuxt”<\/span> <\/em><\/p>\n \u00a0 \u00a0 }<\/em><\/p>\n }<\/em><\/p>\n <\/p>\n Once the\u00a0 npm install –save nuxt<\/em><\/p>\n <\/p>\n <\/p>\n Nuxt.js will transform every\u00a0 Create the\u00a0 $ mkdir pages<\/em><\/p>\n <\/p>\n then create the first page in\u00a0 <template<\/span>><\/span> <\/em><\/p>\n \u00a0 \u00a0 <h1<\/span>><\/span>Hello world!<\/h1<\/span>><\/span> <\/em><\/p>\n <\/template<\/span>><\/span><\/em><\/p>\n <\/p>\n and launch the project with:<\/p>\n $ npm run dev<\/em><\/p>\n <\/p>\n The application is now running on\u00a0http:\/\/localhost:3000<\/a>.<\/em><\/p>\n <\/p>\n That’s it, How cool this is. This is an initial way of creating a Nuxt js project.<\/p>\n Hope you like it and please don’t forget to share.<\/p>\n <\/p>\nFeatures of Nuxt.js<\/h2>\n
*.vue<\/code>)<\/em><\/p>\n<head><\/code>\u00a0element (<title><\/code>,\u00a0<meta><\/code>, etc.)<\/em><\/p>\nCreate a Nuxt JS application<\/h2>\n
\n $ cd<\/span> <project-name><\/em><\/p>\npackage.json<\/code>\u00a0file to specify how to start\u00a0nuxt<\/code>:<\/p>\nscripts<\/code>\u00a0will launch Nuxt.js via\u00a0npm run dev<\/code>.<\/p>\npackage.json<\/code>\u00a0has been created, add\u00a0nuxt<\/code>\u00a0to the project via npm:<\/p>\nThe pages directory<\/h2>\n
*.vue<\/code>\u00a0file inside the\u00a0pages<\/code>\u00a0directory as a route for the application.<\/p>\npages<\/code>\u00a0directory:<\/p>\npages\/index.vue<\/code>:<\/p>\n