loading...

Gatsby for React and Gridsome for Vue.js

mittalyashu profile image Yashu Mittal Updated on ・3 min read

Are you a Vue.js 😍 lover? I am sure you will also love 🤪 this new static site generator, build with the power 💪🏻 of Vue.js + GraphQL = Gridsome.

Image

In today's date, this project is only 3 months old and it's growing very fast.

Github stars

But... What is Gridsome?

Gridsome is a missing piece to the Vue.js ecosystem. What Gatsby.js does for React.js is a total game changer 😎 in how we build websites. React.js is excellent, but we think Vue.js is more approachable for most web designers and devs getting started with JAMstack. Gridsome is the Vue.js alternative to Gatsby.

With Gridsome you get a universal GraphQL layer for all your connected data sources. It's like a single source of truth for your website data ready to be used in any page or components. Connect to any CMS or APIs like Google Spreadsheet, Airtable, Instagram Feed, local markdown files, etc.

Features of gridsome

Let's look at some code 👨🏻‍💻.

Connect to any CMS, APIs or local files, like Markdown, and access it from a GraphQL layer. Insert data to any .vue file with only the fields you need.

<template>
  <div>
    <h2>Latest blog posts</h2>
    <ul>
      <li v-for="edge in $page.allWordPressPost.edges" :key="edge.node._id">
        {{ edge.node.title }}
      </li>
    </ul>
  </div>
</template>

<page-query>
query Blog {
  allWordPressPost (limit: 5) {
    edges {
      node {
        _id
        title
      }
    }
  }
}
</page-query>

You don't need to know GraphQL or Vue to get started with Gridsome. There are few starter kits which can help you out easily.

The GraphQL layer and all the data is accessible in a local GraphQL playground. The playground is usually located at https://localhost:8080/___explore when a Gridsome development project gridsome develop is running.

Have you heard about Google Lighthouse?

Not the other one, actually, this one 😅

Google lighthouse

The Gridsome goal is to make a framework that let you build websites that are optimized "out-of-the-box." It follows the PRPL-pattern by Google. You don't need to be a performance expert to make fast websites with Gridsome. Your site gets almost perfect scores on Google lighthouse out-of-the-box. These are some of the performance steps that Gridsome takes care of:

  • Image compressing & lazy-loading
  • CSS & JS minification
  • Code-splitting
  • HTML compressing
  • Critical CSS (Plugin)
  • Full PWA & Offline-support (plugin)

We have just scratched the surface and there lot more to you can expect to see in future.

Contribute to Gridsome

There are two brothers working on this project, so any contribution is very welcome.

Let's pledge to make the website development process faster and easier for developers.

Gridsome Footer

Links (sources & reference) 📰

Terms and condition 😂

You agree that once you have read this article you will definitely try using Gridsome and like this article.

Found this article interesting? Consider buying a coffee for me.
Buy Me A Coffee Button

Discussion

pic
Editor guide
Collapse
lobo_tuerto profile image
Víctor Adrián

If you'd like to read a tutorial on setting up a new Gridsome project with support for Pug, Sass and Vuetify, then check this out:

lobotuerto.com/blog/quickstart-gui...

Collapse
mittalyashu profile image
Yashu Mittal Author

That's really nice. 👍🏻

Collapse
tomhermans profile image
tom hermans

Yashu, thanks for this article. Do you know how it stacks up vs Nuxt or Gatsby ? What you like better (or not) ?

Collapse
mittalyashu profile image
Yashu Mittal Author

Glad you liked this article.

Nuxt.js is more tailored for creating SPA or Web Applications, whereas Gridsome is just like Gatsby but it uses React.js.

Collapse
promovis profile image
Promovis

uses Vue.js, Gatsby uses React.js

Collapse
berkmann18 profile image
Maximilian Berkmann

Seems really interesting and I'm looking forward to trying this out in preparation of a project.

Collapse
mittalyashu profile image
Yashu Mittal Author

Great, once created the project, don't forget to drop the link here. 😉

Collapse
berkmann18 profile image
Collapse
lkopacz profile image
Lindsey Kopacz

Oh neat! I haven't worked with Vue in a hot minute but I remember loving it!

Collapse
mittalyashu profile image
Yashu Mittal Author

It's a language worth loving, long live Vue.js 😜.