Gatsby for React and Gridsome for Vue.js

#gatsby #react #gridsome #vue

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.

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

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.

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 😅

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: