Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

Abandoning WordPress development in favor of Storyblok + Nuxt

Marketing
Manuel Schröder
Try Storyblok

Storyblok is the first headless CMS that works for developers & marketers alike.

Back when I first learned about the Jamstack, I was curious, but not exactly convinced of its benefits. Page performance? My WordPress sites consistently achieved top-notch performance scores. Scalability? Most of my clients are small to medium-sized enterprises with very little potential for exponential growth. Security? I always made sure to write clean code, develop from scratch and use third party plugins very sparingly.

This is not to say that Jamstack sites are not way faster, more scalable and secure. They are. However, these factors did not initially encourage me sufficiently to turn my back on WordPress. Given their apparently marginal benefits for my particular use case scenario and business model, I could not see why I should leave my well established comfort zone of being a WordPress expert. What made me change my mind? Three things: developer experience, editor experience and user experience.

Section titled User experience User experience

The UX is what initially sparked my interest and curiosity regarding Jamstack. There is something magical about instant page loads when navigating through the site which is made possible by static site generators such as Nuxt. One of my business partners described it very fittingly when he clicked through a Jamstack site for the first time, remarking in astonishment: "It feels like a native application on my desktop computer, it's so snappy and fast".

Indeed, the unique responsiveness of Jamstack sites results in a user experience that matches no other. With WordPress, even the most efficient code, the ideal caching settings and the fastest server will not provide a similar frontend experience.

While the Google Lighthouse, Google PageSpeed Insights, or GTmetrix scores of a well-optimized WordPress site and one built using Storyblok and Nuxt might be comparable, none of these performance measuring tools accurately reflect actual joy to use. And ultimately, a phenomenal user experience is one of the primary factors responsible for users spending time on your site, remembering it and potentially even coming back to it every now and then.

Section titled Editor experience Editor experience

Arguably one of the biggest issues with the WordPress editor experience is that it is not streamlined or coherent at all. Depending on whether you use one of the many page builders, the Gutenberg block editor, or the ACF flexible content fields, how you manage your actual content will drastically differ.

Without any true continuity and homogeneity, truly knowing a CMS becomes close to impossible. Even with years of experience in the WordPress world, when dealing with sites developed by someone else I find myself searching where to modify a particular piece of content more often that I would like to admit.

Consequently, editing content with WordPress can best be described as a cluttered experience and is quite cumbersome, especially for relatively new content editors. Unfortunately, this is true even when third-party solutions are kept to a minimum and best practices are adhered to.

With Storyblok, the content editing experience is much more polished, streamlined, and modern. On top of that, the design is very sleek and aesthetically pleasing (especially the soon to be released Storyblok v2). If you, like myself, have worked with WordPress for most of your career, you will be surprised how much of a difference a fresh and up-to-date user interface makes. In comparison to this beautiful CMS built as a Vue.js SPA, WordPress feels awfully outdated.

However, one Storyblok feature that really amazed me in particular was the visual editor. Storyblok provides a live, interactive version of your website in an iframe where you can see your content changes in real time. Sounds awesome? Because it truly is. As you can imagine, this results in a fantastic editing experience which is a lot of fun to use. You get true, instantaneous visual feedback. Gone are the days of dealing with multiple tabs or broken page builder previews.

While the sleek interface and the visual editor are reasons enough in my opinion to give Storyblok a try, its future holds many more amazing features in store for content editors.

A screenshot of Storyblok V2 Visual Editor.

Storyblok V2 Visual Editor

Section titled Developer experience Developer experience

For me personally as a frontend developer, the DX logically is the most important consideration. I believe that developing should be enjoyable and efficient at the same time. The combination of Storyblok and Nuxt meets these criteria due to the subsequently described features and characteristics, setting new standards and raising the bar for what can be considered a great DX.

Section titled Component-based design Component-based design

Storyblok really embraces and brings to life the component-based approach to designing websites established by modern javascript frontend frameworks such React or Vue. Reusable components result in less repetition, more efficient coding and a more coherent design. While it is possible to use Laravel Blade Components using Roots Sage in WordPress, nothing beats Vue, allowing for HTML, JavaScript and CSS (even scoped!) in a single file. Paired with Tailwind CSS, you will find yourself churning out websites at a rapid pace.

Section titled No reliance on third party plugins such as Advanced Custom Fields No reliance on third party plugins such as Advanced Custom Fields

With WordPress, you arguably do not even get a full featured CMS without the addition of the (brilliant) third-party plugin Advanced Custom Fields. With Storyblok, on the contrary, you can structure your content in stories, bloks and custom fields, giving you complete freedom and ending the dependence on third-party providers.

Section titled Complete autonomy Complete autonomy

Due to the separation of frontend and backend, you are in complete control over your code. No random classes, unnecessary div wrappers or predefined stylesheets that you have to deal with or override.

Section titled Coding standards Coding standards

With a beautiful framework like Nuxt, best practices and common standards are enforced, allowing developers to easily collaborate or build on the work of others. This is something that is severely lacking in the WordPress world.

Section titled Working locally Working locally

While developing on your local machine is certainly possible with the combination of Local WP and a theme like Roots Sage, setting up new projects with Storyblok + Nuxt is much quicker and easier to maintain. The biggest annoyance when using WordPress locally is that you have to migrate your database to a production server once your website is ready for the client to view. With Storyblok + Nuxt, you can work with a single source of truth from start to finish.

Section titled Git & Netlify Git & Netlify

With Nuxt, working with git is a breeze. With WordPress, once again there are no common standards. What do you commit to your git repository? Your theme files, your wp-content folder or the entire WordPress installation?

Many people in the WordPress industry also still use SFTP. Do yourself a favor and give Netlify a try, connect your git repository and start enjoying a new-found peace of mind!

Section titled Is transitioning to Storyblok + Nuxt from WordPress easy? Is transitioning to Storyblok + Nuxt from WordPress easy?

As this article has already suggested, there are a plethora of very different approaches to WordPress development. Some use no-code solutions such as page builders, others develop themes entirely from scratch. Some still use jQuery and have had very little exposure to Vanilla JavaScript or a frontend framework like Vue.

As a result, how challenging it is to make the switch to the JAMStack or Storyblok + Nuxt specifically largely depends on the way you personally have been approaching WordPress development in the past.

In most cases, improving your JavaScript skills and getting acquainted with Vue or React before diving into Storyblok would be advisable when coming from a WordPress background.

Section titled The bottom line The bottom line

Personally, I have never enjoyed coding as much as when I started diving into Storyblok + Nuxt. The combination of these two technologies is truly powerful and driven by an incredibly kind and supportive community that helps you grow as a developer.

Am I going to stop building WordPress sites completely in the near future? Unlikely. For the time-being, there are still very valid reasons and a high market demand making WordPress a reasonable choice for a number of projects. However, Storyblok + Nuxt have replaced WordPress as my favorite tech stack which I intend to use whenever possible.

In 2022, I encourage you to test the waters, leave your comfort zone, become a better developer and quite possibly rediscover or rekindle your passion to create beautiful websites that are a joy to build, edit and visit.