Nuxt. The Vue.js tool that guides my web development work in 2018

My team started using Vue.js back in November 2016 and since then have been gradually introducing it to projects where the need fits. Around that time we also started building static sites again with some minimal vanilla ES6 JavaScript. That was a lot of fun and it got us back into the habit of utilizing multiple replicas of content to ensure 100% up time by hosting in multiple regions.

For a long time my team debated how we could structure our Vue.js applications so we could pre-render the entire site as static, but somehow with Vue.js baked in to make use of the router and other interactive features. It turns out Nuxt is this tool. It isn’t really “another framework” on top of Vue.js, but rather just a structure that is enforced by way of a script that helps you build the initial project with the most commonly used packages.

Things I love about Nuxt

What is cool about Nuxt is that we have found a lot of our Content Management System (CMS) use cases are easily met with Vue.js when we use Nuxt - whether that be a small chunk of the site or the entire site itself.

We have developed things that have nothing to do with the concept of “pages”... such as a search interface to Apache Solr (proxied via Nginx) as one example, and a donation app (landing page) that loads a 3rd party payment form for a charity we work with as another example. We didn’t have big plans to introduce Nuxt in these cases, it just made sense as we were working on it to use Nuxt when the need to use some of it’s dependencies started coming up. In one project we adopted Nuxt to gain the router. As a side effect the refactoring organized a lot of the code in a much better way. That could be more of a side-effect of having done something twice though.

If you know Vue.js, getting started with Nuxt is easy… you just run the setup command and then start putting your components into the pages or components directory, depending on whether the component is to represent a “page” (with a URL) or a chunk of data (ie, a component to use as a sub-component) respectively. Nuxt provides a hot-loading development server so every time you press save in your code editor it updates your browser with the new version of the things you are working on. When you are finished building, you simply run the build command and it packages everything up in a pre-rendered static form. Super easy. Super awesome.

When we pre-render sites we get great performance for general content pages and we can ensure the site follows good SEO practices. We sometimes go a step further and enable caching as an “offline app” (ie, a "pwa" or progressive web app) on the user’s device so they never need to visit our front-end server again! We can deploy the entire pre-rendered static site to a CDN.

The pre-rendering process also validates images are sized appropriately and also allows us to hook into webpack's pipeline with our own configuration if we need to. During the build process the code is minimized and if additional browser support is needed for IE and Safari quirks it tries to deal with it automatically. For the most part I never think about browser problems anymore and this is great.

A good place to start if you are looking into pre-rendering Nuxt data from an API is Christian Nwamba’s blog post, “Building server-rendered apps in Vue using Nuxt.js”.

Still, sometimes pre-rendering isn’t enough…

...and for those cases we sill pre-render most of the time, in some way.

For “live” data we cannot pre-render we make use of APIs to take care of any interactivity using Node.js (with Express) and Apache Cassandra. We choose these technologies because we can ensure zero downtime by having multiple replicas in different regions, and we can also we can scale by adding more servers. We can use similar hosting strategies to ensure redundancy/fail-over as we do with our static sites which is a nice benefit. Our build strategy overall is pretty close to what people have been calling the “JAMstack” with the addition of planning for offline situations and having good redundancy across the entire application stack.

I am having a tough time finding things to dislike about using Vue.js with Nuxt! Both are fun and motivating to use. It is a great time to be developing front-end web projects. If you’re interested in learning more about using Nuxt as a Vue.js developer my teammates and I are currently reviewing this Udemy course on Nuxt. It seems to cover most of the typical configurations we have encountered.

Myself and some of my teammates will be attending VueConf in Toronto in November. Hope to see you there!