vuejsdevelopers.com Is Now A Super-Sexy Nuxt 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.
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.
