My experiences building my latest project using Vue, Nuxt and Tailwind

Hey all,

I'm just finishing up my latest side project - https://shoutshare.io.

For this project I chose to use Nuxt and Tailwind (instead of my usual choices of Vue and Bootstrap). The TL;DR is that I am in love with both of these technologies. Nuxt had a bit of a learning curve but SSR and the opinionated best practices helped me launch quicker; and Tailwind is beautiful and a great way of writing frontend code.

Here is a more in-depth description. Let's start with the pros/cons of Nuxt compared to regular Vue:

Pros:

• Quicker to get started - many things preconfigured (routing, VueX, ...)
• Opinionated best practices already set up
• SSR is a game-changer - I've noticed this has decreased page load speed drastically (and I'm hoping I'll reap SEO benefits over time)

Cons:

• Since Nuxt is extremely opinionated, I encountered a LOT of issues where I was not following the opinionated way of doing things, and thus things were breaking. I ran into a large number of issues with Nuxt Auth cookie-based authentication, for example - I forgot to set the magical API_URL env var (and missed documentation stating this was required...) and spent hours troubleshooting why this wasn't working
• SSR makes troubleshooting and diagnosing errors a lot harder. Nuxt overall adds complexity
• Learning curve was harder - I had to wrap my head around Nuxt doing both server-side and client-side rendering (and this also somewhat complicates some code - you need to check "am I operating on the client or side?")
• Documentation was a lot less clear than Vue's plain, amazing documentation

Now, let's look at some pros/cons of Tailwind vs Bootstrap:

Pros:

• Tailwind UI is phenomenal and well worth the price. I used many templates from Tailwind UI (Pricing page, index page, features, etc) and modified them slightly to match my theme
• Easier than Bootstrap to tweak and customize, especially when prototyping. I started with a green-500 theme, but wanted to see how blue looked on one or two buttons - so I just switched those to blue-500
• The tooling is great. The Tailwind config makes it easy to tweak the framework.
• Vim plugin for tailwind auto-completion is very helpful!

Cons:

• My HTML looks waaaay more complex. Simple buttons can have a very large number of classes in them, making it look a lot messier than <button class="default-btn btnLarge"> or something. I can create classes using @apply (or just use Vue components), but I have not gotten around to this.
• Embedding SVGs (especially large ones) directly in the HTML is also a lot messier than something like GlyphIcons <i class="arrow-right" />
• Bootstrap has a lot more components by default. This was somewhat solved with TailwindUI - as it has things like styled tables, etc - but that requires paying.

That's about it. I'm definitely going to be using Nuxt and Tailwind for future sideprojects!