days
-4
-5
hours
0
-3
minutes
-1
-1
seconds
-3
-1
search
Next.js + Vue = Nuxt.js

Nuxt.js 1.0: Make web apps faster than ever with this Vue-based framework

Jane Elizabeth
Nuxt.js
© Shutterstock / Tata Donets

There’s a new framework in town. Nuxt.js brings the best of Next.js and Vue together to create a framework for complex and universal web app creations.

The idea for Nuxt.js came not long after Next.js was released. What if Next.js could be combined with Vue? A year and some change later, Nuxt.js 1.0 has officially arrived.

Nuxt.js is a framework that runs on top of Vue.js, vue-router, vuex and vue-meta. This framework aims to create a quick turnaround for creating complex and universal Vue web applications. Developers are able to create a static generated web app quickly with no need to write a build config.

Nuxt.js features

The main focus for Nuxt.js is to make a framework with enough flexibility to work as a main project base or as additional support to a Node.js project. They do this with UI rendering while abstracting away the client/server distribution.  When nuxt is launched, it starts a development server with hot-reloading and Vue Server Renderer configured to automatically server-render your application.

Nuxt.js also offers an additional deployment option: nuxt generate. This builds a static generated Vue application, which the Nuxt.js developers think it’s the next big thing in microservices.

The basic download for Nuxt.js is practically miniscule, weighing in at only 57kB min+gzip. (53kB with Vuex!) This initial package includes a whole host of tools to help create a web application, including

The Nuxt.js team uses webpack with vue-loader and babel-loader to bundle, code-split and minimize code.

SEE MORE: React is growing faster than JavaScript in general while Angular is losing ground to Vue

This framework offers a number of features that make it easier to develop on both the client and server side. Let’s take a look at some of the big ones.

Obviously, Nuxt.js lets you write in Vue files. It offers automatic code splitting, server-side rendering, a powerful routing system with asynchronous data, and static file serving.

Other features include:

  • ES6/ES7 Transpilation
  • Bundling and minifying of your JS & CSS
  • Managingelement (,, etc.)
  • Hot module replacement in Development
  • Pre-processor: Sass, Less, Stylus, etc.
  • HTTP/2 push headers ready
  • Extending with Modular architecture

SEE MORE: The rising star of JavaScript: Vue.js takes control of the game

Get Nuxt.js

Nuxt.js is obviously just starting out. However, there is already a growing community of commiters and users on GitHub and on the Nuxt.js site. And, it must be said, their documentation is very thorough.

If you’re interested in trying it out, the development team has created a starter template for you to experiment with. For more information, check out their handy installation guide.

 

Author
Jane Elizabeth
Jane Elizabeth is an assistant editor for JAXenter.com.

Leave a Reply

Be the First to Comment!

avatar
400
  Subscribe  
Notify of