Gridsome Vs Nuxt

Posted on  by admin

Currently laying the foundations for my new website, currently doing mockups in XD, but I am also searching for a good solution to bring it into the web.

  1. The website will have a small (mostly photography and coding centered) blog, a section for my photography work and one for coding projects (as a kind of portfolio) and maybe even a section regarding "gaming" (not decided yet).

  2. In order to maintain the site easily, I will probably use a headless CMS like Strapi as writing my own small NodeJS backend CMS would probably be overkill for now.

  3. After all, it is a one-man project. My current dilemma lies in the choice between Nuxt (better for universal use) and Grindsome (better for blogs).

Maybe even VueJS itself is overkill for the project but I like to have the ability to expand it later, and not have then to redo most of it, if I was to implement more dynamic content later on.

Maybe some of you have already worked with one of them or even both in similar use cases and can share some opinions or thoughts on the matter.

Modified2 years, 3 months ago. This question is opinion-based. It is not currently accepting answers.

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post. Closed 2 years ago. Gridsome/Gatsby use case: CMS only? I read that Gridsome/Gatsby works well with CMS's, but I never had to do anything with a CMS which is why I personally can't relate with that advantage.

Is this the only case where it's better to use Gridsome/Gatsby? Static Site Genration and Prefetching. All can do static site generation and prefetching. Is there any difference in the behaviour at all? Basically with Nuxt/Next I have the flexibility to do what I want and change the build behaviour (SSR or static site generation) easily while I'm actively developing. On the other hand with Gridsome/Gatsby that flexibility is not given. Time Investment. Also, considering time, learning two frameworks - well - is time consuming.

Therefore Nuxt/Next would keep me covered for a broader variety of use cases and would be more worth to learn. At least thats how I think based on my current knowledge. Current Personal Use Case. In my specific case I want to create a landing page.

Theoretically, from reading articles, Gatsby/Gridsome sounds more suitable. But looking at the features, Nuxt/Next can do exactly the same without any disadvantages compared to Gridsome/Gatsby. 11 gold badge1818 silver badges2727 bronze badges. 2727 bronze badges. Gridsome/Gatsby are Static oriented only, when Nuxt/Next are SSR first. SSG: Static Site Generator - Gatsby/Gridsome. SSR: Server Side Rendering - Next/nuxt. No, but there are a lot of SSG plugins that will help you fetching data from CMS (Wordpress, Drupal, Contenful, Strapi etc). You don't need a CMS to use a SSG, you can use either JSON, Markdown, MDX to hydrate your markup.

Indeed, you can't change build behavior with SSG. But you can do dynamic things with static website. Time Investment. Very similar between SSG and SSR.

SSG is maybe simplier, more abstraction, but if you use Gatsby, you will learn a part of React, same for Next. Personal use case. For a landing page, I think SSG is the perfect tool. Do you need more than a static display that fetch data during build process? You can use Netlify Forms (or any other tool). Backend functions? Use Serverless functions. SSG comes with great SEO/performance plugins, I'm not sure they are available with SSR.

44 gold badges3232 silver badges5151 bronze badges. 5151 bronze badges. With a static site generator like Gridsome or Gatsby, you can deploy your site on very cheap static hosting platforms like S3, and keep all the dynamic parts on the client's browser.

You would only need a dynamic backend (e.g. NodeJS or Serverless) for API calls or form handling. For server side rendering engines like Nuxt or Next, you normally need a NodeJS server to serve the static pages too, and take care of capacity and availabilty on that server yourself, which can be a lot more expensive.

There's also a best-of-both-worlds approach which is to write your site in Next or Nuxt, and use it as a static site generator, with commands like 'next export' or 'nuxt generate'.

They have some limitations on features that are not supported in static sites, so you need to experiment a bit to see if that suits you.

11 gold badge3434 silver badges5656 bronze badges. 5656 bronze badges. Vue.js has grown in popularity over the past two years, with nearly 180,000 stars on GitHub at the time of writing.

This increasing adoption has compelled developers around the world to build myriad tools and frameworks around Vue.js, inlcuding Nuxt.js and Gridsome. In this guide, we’ll compare Gridsome vs. Nuxt.js, two frameworks built on Vue.js that you can use to build fast JAMstack applications. We’ll evaluate each in terms of the developer experience, general use and best practices, structure, and community adoption.

To show how Nuxt.js and Gridsome work, we’ll build an example blog with both frameworks. Here’s what we’ll cover:. To follow along with this Gridsome vs. Nuxt comparison and tutorial, you should have the following:.

Node >= v8.3 and NPM installed. Yarn package manager installed: npm install -g yarn (Gridsome recommends using Yarn). Basic knowledge of JavaScript.

Basic knowledge of Vue.js. Gridsome CLI installed: npm install -g @gridsome/cli. Knowledge of GraphQL (not compulsory).

Basic knowledge of the command line. Gridsome is a data-driven static site generator that generates HTML files from local files, CMSs, and external APIs. HTML files are initially loaded in the browser as static files and then hydrate into fully powered Vue.js apps.

This improves SEO while providing all the benefits of Vue. The data is prefetched and stored in a GraphQL data layer. Here’s an overview of Gridsome’s directory structure.

Nuxt.js is a very powerful Vue.js framework that allows you to build modern web applications any way you choose.

LogRocket: Full visibility into your web apps

Nuxt.js gives you the flexibility to build web applications either as single-page, server-side rendered, or statically generated. Check the Nuxt.js documentation for an overview of the Nuxt directory structure. To show how Gridsome works — and establish a frame of reference to compare to Nuxt.js — let’s explore how to build a blog with Gridsome.

What is Gridsome?

  • To create a new Gridsome project, run:. Open the newly created folder in your code editor and run gridsome develop to start the development server.
  • In your browser, open http://localhost:8080 and you should see your awesome — albeit unfinished — blog. The /src directory is where you’ll be working with the .vue files.
  • Starting with the /pages directory, every .vue file in the directory becomes a page in the browser, so the contents of About.vue will be on /about in the browser.
  • There are two ways to create pages in Gridsome: you can build file-based pages with the .vue files or you can use the pages API (more on this later).
  • Paste the code snippet below inside the component in /pages/index.vue to replace the initial content.
  • Before we move on, you’ll need to import the CSS for the blog globally. Create a file using this directory structure:. Paste the contents of this Gist in the main.css file and then import it at the top of the main.js file, which is in the root of the /src directory:.
  • The main.js file is used to import global styles and scripts, You’ll also notice that we have access to the Vue instance in the exported function, we can use that to install Vue.js plugins, register global components (just like the default layout component) and directives.

Gridsome also has a number of reusable packages called plugins. These plugins can be used to implement some custom functionality in your apps.

There are over 180 plugins currently listed on the Gridsome plugins page.

We’ll use the @gridsome/source-filesystem plugin to transform the content we write in markdown and load them in a GraphQL layer so we can query in our components.