What to Choose Between Gridsome and NUXTJS

A quick comparison of the most popular Vue.js frameworks

Gridsome and Nuxtjs are the most popular Vue.js frameworks at this time and will certainly be throughout 2020.

Today many people and companies prefer to start using Vue.js from one of these frameworks.

Why start from a framework?

The main reason is that these frameworks already have a lot of preset configurations and are easy to use.

Let’s see an example

If you have already used Vue.js, you know that to create a Single-page Application you also need to include Vue Router and make the necessary configurations, Gridsome and Nuxtjs automatically generate the vue-router configuration simply based on your file tree.

This is only one of the simplifications provided by these frameworks.

The definition of NUXTJS

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.

The 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 differences

Nuxtjs is definitely a more complete framework, and it can do all that Gridsome does plus much more.

Gridsome

Gridsome is a Static Site Generator, and it generates pre-rendered static HTML files. What I love about this framework is that it has a GraphQl Data Layer that allows you to fetch content from local files or external APIs and use it in your Vue.js components.

NUXTJS

Nuxtjs has a mode configuration that determines how your app is built, deployed, and served. The rendering modes are three:

Server-Side Rendering: a Node.js server will be used to deliver HTML based on your Vue components to the client instead of the pure javascript.

a Node.js server will be used to deliver HTML based on your Vue components to the client instead of the pure javascript. Static Site Generation (as Gridsome): it can generate pre-rendered static HTML files, this has SEO benefits because Nuxt will pre-render all pages and include the necessary HTML.

it can generate pre-rendered static HTML files, this has SEO benefits because Nuxt will pre-render all pages and include the necessary HTML. Single Page Application (SPA): it can create your website as a Single Page App

As you can see, Nuxt can be a static site generator like Gridsome, but it has many more features and ways of rendering.

Gridsome vs Nuxtjs on Github

04/02/2020

If we compare the repositories on Github, we can immediately see that Nuxt.js is more starred and forked than Gridsome.

Who is using NUXTJS

On their website, we find the list of companies that use this framework, and it is really impressive to read the names of some large companies that decided to use it.

NUXJS users

ps I could not find big Gridsome users

Conclusion

If you’re planning to build a large scale application , handling authentication and other stuff which is better suited to be handled on the server-side, Nuxt.js is the way to go .

, handling authentication and other stuff which is better suited to be handled on the server-side, . If you need to develop a static website, you can indiscriminately choose one of the two, I think they are on the same leve l, but I prefer Nuxt .

you can indiscriminately choose one of the two, I think l, but . If you want to connect them with a Headless CMS and build a JAMstack project, probably Gridsome is more powerful. I think that the GraphQL Data Layer is super handy and straightforward to use, because it allows you to build static content from data sources, so in this case, Gridsome is the choice.

Useful resources

Gridsome

Github repo

Website

Community chat (Discord)

NUXTJS

Github repo

Website

Community chat (Discord)