Gatsby for React and Gridsome for Vue.js
Tags: gatsby, react, gridsome, vue
Published: 2018-10-31 14:42:08

---
title: Gatsby for React and Gridsome for Vue.js
published: true
description: A new static site generator is born for vue.js.
tags: gatsby, react.js, gridsome, vuejs
---

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](https://gridsome.org).

![Image](https://thepracticaldev.s3.amazonaws.com/i/878bujtx44yni3oub1hf.gif)

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

![Github stars](https://thepracticaldev.s3.amazonaws.com/i/shkhodh35k7m7jvz0onk.png)

**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](https://thepracticaldev.s3.amazonaws.com/i/t3eqausptyql5upaaddf.png)

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.

```js
<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](https://github.com/gridsome/) 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](https://blog.keycdn.com/blog/wp-content/uploads/2017/06/lighthouse-test-report.png)

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](https://developers.google.com/web/fundamentals/performance/prpl-pattern/). 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](https://github.com/gridsome/gridsome/graphs/contributors) 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](https://thepracticaldev.s3.amazonaws.com/i/crl5la6m1qu5pjrb53sk.png)

# Links _(sources & reference)_ 📰
* https://gridsome.org
* https://github.com/gridsome/
* https://discord.gg/7znJUkH

# 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](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/mittalyashu)