Getting Started with Nuxt

As the Nuxt.js website says, Nuxt is a framework that makes it easier for building Vue applications.

From what I can tell, theres two main uses for Nuxt: Server Side Rendered applications and Single Page Applications.

A server side rendered Nuxt application is hosted through a node process on a server, which prerenders the page before sending it to a browser.

Personally I’m more interested in the SPA features that Nuxt provides, mainly because theres a plethora of free hosting options for single page applications (after all its just static HTML, JS and CSS).

For a SPA use case, Nuxt provides the following bits out of the box on top of the normal stuff you get using either create-react-app or vue-cli:

  • Built in router
  • Opinionated folder structure (every vue component in the pages folder becomes a route automatically)
  • Pre-rendered routes, Nuxt will automatically prerender the routes within the pages directory (i.e. each route will have its own html file in the build output), which improves the SEO a lot.
  • Loading bar between route changes, that can be configured here

Additionally it also supports all the good stuff in the Vue ecosystem, namely Vuex and friends.

Typescript Support

Nuxt has first class Typescript support, which works pretty flawlessly. It seems to feel better integrated with the framework than Create React App (I’ve used Typescript with CRA, and its always felt a bit tacked on).

The installation is pretty simply, just install a package, add the new package to the Nuxt config and add a tsconfig.json. (The official Nuxt docs has an example config).

The Nuxt Typescript docs also has a Cookbook that contains a lot of Typescript examples, which are super useful.

The only critique I have is the Nuxt cli (nuxt-create-app) doesn’t have an option to create a Typescript project.

Nuxt Modules

Nuxt has a concept of modules, which are easy to use extensions that plug into Nuxt.

Some examples include:

  • Google Analytics
  • Authentication
  • HTTP
  • Firebase
  • Dotenv

I had a look to see if Next (The React version for Nuxt, created by Zeit) to see if they have something similar to a module system, and it doesn’t seem like it.

However that being said, I imagine all the higher order component libraries for React will work for Next as well. Higher order components seems to be the defacto method of handling extending React’s functionality, at least from what I’ve seen.