Many frequent readers will be aware that I have started a new side project to this blog and created a new website/blog/business, the details of which I have previously outlined in times are a changing - hopefully for the better.
The initial development of the site started with just exploring Gridsome and making use of Netlify, because at the time the primary objective was focused on developing a relatively simple Website and Blog. In all honesty, I had not considered anything more than that.
Over the past year, I worked with Gridsome and have become quite familiar with it, and have even indirectly contributed to it by developing a couple of plugins for it, Gridsome Google Tag Plugin and Gridsome plugin for Amazon Onelink Configuration. I have also posted a number of articles providing explanations on how to implement further aspects regarding Gridsome.
On the whole, I really enjoy working with Gridsome and I believe it is a truly great framework for developing static generated websites. I have found it to be easily adaptable and fairly robust and I completely recommend it to others learn.
During August/September 2020, I had a meeting with other a number of business investors and we started to discuss my Geek.I.Am project and it raised some excitement when I provided an explanation of the underlying business that it will eventually target.
The discussions, eventually evolved into commitments to funding etc. To cut a long story short, the entire architecture and functionality of the website has evolved into a highly functional end user application and will also require integration with a number of additional services.
During November and December, myself and my currently very small team have started work. As all developers can agree, this project from the outset is enormous and is going to take a lot of time.
In defining the architecture and project plan, we all came to the agreement, that Gridsome, in its current state, probably will become a bit hindrance and we would preferably want to make use of framework that has little more maturity and larger community involvement.
We really want to try stick to using Vue.Js as we all have a strong preference for it. We eventually decided that Nuxt - The Intuitive Vue Framework would be the most appropriate framework to use.
During January 2021, we decided to start porting our existing website over to make use of Nuxt.
Why Choose Nuxt ?
The primary reasons why we chose Nuxt over Gridsome at this point comprise a number of reasons. In my personal opinion the first clues lie in the definitions of the two projects.
Definition of Nuxt
Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt goal is to make web development powerful and performant with a great developer experience in mind.
Definition of Gridsome
Gridsome is a modern website development framework for creating fast and secure websites that can be deployed anywhere. Static HTML files are generated to create SEO-friendly markup that hydrates into a Vue.js-powered SPA once loaded in the browser.
The difference may at first seem a little subtle, but once you start delving into them they become more apparent. At first, one might think that Gridsome and Nuxt are competing products, but I think in effect they both solve very different problems although there is some overlap between the two products.
Nuxt is more of a complete web application framework, which does all that Gridsome can do and a whole lot more. Although it doesn't necessarily do everything that Gridsome can do better than Gridsome.
Gridsome is rather more focused on Static Site Generation, generating pre-rendered static HTML files and makes use of GraphQl Data Layer that enabled the fetching content from local files or external APIs and use it in your Vue.js components. The tests we conducted revealed that Gridsome was definitely faster than Nuxt at doing this.
The big differentiation we considered had to do more with the scale of our intended application complexity. Nuxt certainly has a lot more features to assist developers in building more complex applications.
The use case for Gridsome are definitely more focused towards more documentation heavy websites like Brochure Websites, Blogs, Tutorial, News and Online Documentation. It's really easy to connect Gridsome to a Headless CMS and the GraphQL Data layer is a convenience.
We found we could extend Gridsome to start doing some of the things we wanted, but it always felt a little bit wrong. Things like Authentication and other interactions just feel like third class citizens in Gridsome, in that they may be possible but feels like you are swimming against the tide.
Nuxt on the other hand, it does feel like Static Generation is a second class citizen and possibly from some perspectives very much an after thought, but it is still pretty good. However, developing more complex applications certainly feels more natural and more of the intentional use case for Nuxt. This is definitely the direction we see the Geek.I.Am project moving towards.
Another big consideration we had, was more along the lines of support and community. Nuxt certainly does seem to have the upper hand in both of these cases.
Advantage for Vue Developers
Switching development between these two frameworks is not as difficult as I had first anticipated. The two frameworks have take different opinionated decisions on project layout and configuration but they are not that difficult to understand. However, Nuxt does incur slightly steeper learning curve.
The nuxt layout may at first appear to be more intimidating, but after a day or so and taking time to understand it made sense and actually becomes very easy to use. If I have to biased, I would say I prefer the Gridsome structure, it just feels a little easier, but that is just my personal perspective.
If you have some familiarity with Vue, you won't find either project layout too unfamiliar and you can still make use of all the familiar concepts and implementations in Vue.
Gridsome is an awesome framework if you want to get a website up and running in matter of hours. It's quick fast and very easy to learn.
Nuxt has some complex features, particularly because it implements Vuex.Store , eassentially what Vuex.Store enables you do is communicate across components and manipulate data in a single place. This is really handy when its more than likely that your components are going to share data sets and you want to avoid code duplication.
| Gridsome | Nuxt |
|---|---|
| Great and Easy to understand Documentation | Great documentation |
| Easy to use | Flexible |
| Implements GraphQL natively | GraphQL by plugins |
| SSR by default | SSR as an option |
| Great for beginners | steeper learning curve compared to Gridsome |
| Small community | Larger community |
Nuxt is entirely dependent on the Vue ecosystem with tools and libraries like vue-loader for Vue components, Vuex for state management and vue-router for routing integrated into its core.
Nuxt also enables you to target multiple Output formats using the same code. Nuxt uses Webpack v4 which provides a significant boost in performance.
Nuxt is probably the most popular Vue framework available. It has seen major adoption in the last few years. With that said, it has a great, really big community of Vue developers and is actively maintained. It was also able to gain funding in 2020, which has helped to stabilise and foster deeper community involvement.
- What is this Directory.Packages.props file all about? - January 25, 2024
- How to add Tailwind CSS to Blazor website - November 20, 2023
- How to deploy a Blazor site to Netlify - November 17, 2023