vuejsdevelopers.com Is Now A Super-Sexy Nuxt PWA

Our shiny, new Nuxt.js PWA

While I’ve always been immensely proud of the content on the Vue.js Developers blog, I’ve also been slightly embarrassed about the site itself.

I mean, it’s pretty hard to keep a straight face when you explain to people that the whole purpose of your blog is to advocate for Vue.js, and yet it’s built with Ruby and jQuery!

So after a feverish week of coding I’m happy to announce it’s been relaunched today as a flash, new static Nuxt.js PWA!

Why upgrade

When I first launched the blog back in January 2017, I decided it would be best to focus on writing useful content rather than worrying about the infrastructure.

So I chose a quick and easy Jekyll blog with a free theme. It was good for what it was, but I felt like we’d well and truly outgrown it.

The old site

That said, I’m a big fan of “if it ain’t broke, don’t fix it”, so let me be more specific as to why I thought the week of development was worth the time:

  • Easier maintenance. Over time, the site became increasingly difficult to add to. Every time me or another developer would add a feature or new page, something would break, and often it would be a week until I noticed. This could also have been dealt with by implementing more unit and E2E tests, but for a spaghetti code site like this, it’s actually a lot easier to just rebuild the site then to implement more testing.
  • Improve SEO and user experience. Switching to a server-rendered single-page PWA is good for all users, human or bot.
  • Improve aesthetics. I always wanted to update the appearance to better reflect the brand, but I couldn’t see the point in putting that work in if I was going to replace the underlying site anyway.
  • Use a stack that matched my skill set. Probably I could have done a better job with the Jekyll blog if I knew Ruby. Much better for me to now have a JavaScript stack where I can dig in if necessary.

Technology used

  • Nuxt.js 2. This was actually my first time using Nuxt. I used it over plain-Vue entirely because of the out-of-the-box static site build and prerendering and the option of the PWA module. Nuxt also comes with a lot of other handy integration like meta tags, Google Analytics etc. Very happy with this choice.
  • Bulma for CSS. I’m a big fan of Bulma, because it’s minimal and lightweight, much like Vue, and also the aesthetic of Bulma matches my taste.
  • Static hosting on Netlify. It’s free, easy and works perfectly, therefore a no brainer.

Also, the articles on the site are markdown files and I didn’t want to have to change all of those in the process of migration. Fortunately, I found the very useful frontmatter-markdown-loader which works marvelously with Nuxt.

By the way, if you’re thinking of building a markdown-based blog with Nuxt, I highly recommend this article by the author of the previously mentioned plugin:

Challenges

Web development is tricky at the best of times, but using Nuxt and Bulma was a overall a fairly painless experience. I actually had 80% of the rebuild done within a day; it’s that pesky 20% that took the rest of the week (as usual).

But it wouldn’t be a proper web project if I didn’t run into at least one issue that halted progress for half a day. For me, that was implementing responsive breakpoints in Vue.

I used the vue-mq plugin for this, but unfortunately it doesn’t play nice with server-side rendering and I ran into an issue where computed class bindings were not being updated on the page after hydration.

This took a while to debug and I ended up having to use my own fork of the plugin to get it to do what I needed. Such is life.

What’s next

The site is a work in progress; there are a few pages and features still missing from the original, and I haven’t fully optimized it (no image compression yet, sorry for wasting your bandwidth!).

I’m also planning to trick it out a bit more with some nice transitions and animations. But I decided to launch it with just the basics done.

I’d love to hear any feedback or bug reports, especially if you’re using an obscure device or browser I wouldn’t have tested on (I develop with Mac, Firefox and have an iPhone).

Also, let me know if you have any questions about the architecture as I’d be happy to elaborate.