Is Nuxt.js + Storyblok a Wordpress killer?

Last updated on 
Is Nuxt.js + Storyblok a Wordpress killer?

No it is not, BUT...

For skilled Wordpress developer who does not use pre-made themes or page builders like Elementor or Divi, Nuxt.js + Storyblok might be an awesome alternative.

In my opinion, Storyblok + Nuxt.js improves my user experience as a developer, the user experience of my customers AND the user experience of my customers customers.

Pros of Storyblok compared to Wordpress

Cleaner CMS user interface and features

Using Storyblok is like jumping from Windows 2000 to current macOS; Everything works faster and smoother and looks fresh. User interface of Storyblok is intuitive and by default contains all the basic features a website developer needs.

Key features for me:

  • Block library
  • Intuitive content view
  • Strutcured asset library
  • Settings to set up development, production and monitoring environments, plus much more.

Block library

Block library is basically the same thing as ACF Pro in Wordpress. This is a killer feature that really makes the content management work effortless. Block library allows developer to define different content patterns ("blocks") that can either be specified to use only on certain contents or available everywhere. If you know what ACF is and how to use it, you will instantly know how to use and structure Storyblok blocks.

Asset management

Managing assets in Wordpress gets overwhelmingly painfull fast without any improving plugins. This is only due to the fact that Wordpress does not have a structured asset management (you can't put assets inside folders). Storyblok has this feature by default plus there are cool settings for assets to make it even more suitable for your needs.

Content editing preview

Writing content with Storyblok is very cool as you can see how the content written lays down on the actual UI as seen in the image below. This is something I think Gutenberg aims for but fails trying too hard.

Visual page builder in action.

Environments

Storyblok comes with built in functionality to handle development and production environments. This is handy as the developer does not have to clone the Storyblok to make the updates on frontend code, for example.

Each environment has its own access token and each access token can be limited to certain actions only.

Changing the URLs for development or production

Content types

Lets say you want to make a custom content type (aka "custom post type" or "CPT") in Wordpress. You have two choices: write the code for the CPT to a theme or plugin OR use a plugin that essentially does the same thing. Its not hard by any means as there are good code generators for that, but in Storyblok it is just way easier.

Defining custom content types, as they are called in Storyblok, you just go to a Block library and define nyt custom content type. Each content type can obviously contain only the necessary content blocks.

Cons of Storyblok compared to Wordpress

I believe there's always two sides of the coin. These are the key cons that I've found Storyblok has over Wordpress.

Figuring out how to get the content from Storyblok to your frontend project has its complexity, but should not be an problem to any advanced developer.

Saas vs. open source

This is from a developer point of view: As Storyblok is not an open source project, modifying it is hard or impossible. When comparing to Wordpress or any open source project, tinkering the source code is always possible, though it is only rarely necessary.

Amount of plugins

For me, plugins are bad by default. Nevertheless, there are good ones too that I like to use, for example: ACF Pro, Yoast SEO, Query monitor and some form plugins. Storyblok only has a few to offer and many of those are not coming with the free plan.

Forms

Handling forms in Storyblok is a task that needs a seasoned developer in my opinion. Where Wordpress has multiple solid form plugin options, Storyblok can't have those as it is headless CMS. Making a form builder in Storyblok is not hard and the result might be even better, but actually making forms work is harder than with Wordpress.

Complexity

Using storyblok adds a level of complexity in the project as it is not "monolithic" by nature. Figuring out how to get the content from Storyblok to your frontend project has its complexity, but should not be an problem to any advanced developer.

Nuxt.js vs. Wordpress theme

Now this is something that will define wether you should try the Nuxt.js + Storyblok or not: Are you familiar with the consepts of SSR Javascript frameworks and Vue or not?

Building "modern" websites is a weird concept as it usually refers to using some .js based frontend framework. I think that you can build modern websites with PHP + small frontend libraries like Alpine.js for example. Building modern websites is actually all about using good tools to simplify the hard tasks needed to optimize production code. And ofc the UI needs to look fresh and work on majority of devices.

That being said, I claim that average performance is easier to acchieve with Nuxt.js than with Wordpress themes.

If you like how Vue works more than you like to write Wordpress themes, then Nuxt.js is for you when it comes to making websites. In my opinion, you need more stuff like libraries while developing but the end result is cleaner and usually faster. Performance always comes down to code quality. That being said, I claim that average performance is easier to acchieve with Nuxt.js than with Wordpress themes.

Nuxt.js with Storyblok

This one is so easy, it made me laugh when I lost my virginity with this this stack. Using the official Nuxt.js module for Storyblok, the hard part is over very quickly and you can start building the UI.

Here's the module: https://nuxt.com/modules/storyblok

Even if you don't know Nuxt but you are familiar with SSR concepts and Vue, the learning curve is super smooth. Nuxt documentation could not be better and to kickstart everything, watching this video by Fireship makes it even smoother:

Hard parts of building websites with Nuxt.js and Storyblok

As with any headless project, there are some things to consider while estimating the resources needed:

Forms

How to handle froms? That is a $1000000 question. You need to figure this out per project but basically the workflow goes something like this: Build form block that posts its request to a custom made route inside your Nuxt project and then sends the form using a SMTP of your choice.

Sitemaps

Making working sitemaps needs work. There is a nice sitemap module for Nuxt but to make it work with Storyblok, you need to write a code for sitemap building by your self and then define some configs to actually serve it.

SEO and SERP

With Wordpress, it is easy to implement basic SEO and SERP features to a website just by using a plugin like Yoast SEO. With Nuxt, you need to build your own logic for these features.

Server configuration

In my opinion, publishing any .js project server is very complicated compared to a PHP project like Wordpress. With Nuxt, you need to configure your project for the hosting service which can be hard if you don't want to use services that have a dedicated configurations for Nuxt projects. I personally like the solution by DigitalOcean, as it comes with nice CI/CD features and env-variable management by default. It also had a good documentation and built in default configs by Nuxt.

Conclusion

For me, the only reason I'll use Wordpress over the Storyblok + Nuxt.js anymore is the hosting budget and wether my client needs new email services. Or especially needs Wordpress for some other reason.

In my opinion, Storyblok + Nuxt.js improves my user experience as a developer, the user experience of my customers AND the user experience of my customers customers. These three reasons are how you should ever define which tools, services and tech to use.

Key reasons to use Storyblok + Nuxt.js over Wordpress:

  • Faster development
  • Faster usage
  • More secure
  • Easier to get the performance to high levels
  • Futureproof

If you'd like to hear more just drop me an email to info@sampovirmasalo.fi.

If you need a partner that can build you an seriously professional website with the best technologies and the best user experience, I suggest you to contact our company https://meiko.fi via email info@meiko.fi.

Privacy Policy