Headless CMS for Gridsome

Hygraph is the ideal Headless CMS for Gridsome websites and applications. Read further to learn how our API-first CMS allows you to add components to your Gridsome apps in minutes and enable your website's content to be managed from a powerful CMS.

Step #1 - Set up your index page layout

Setting up the layout in the index.vue file in Gridsome is crucial for defining your website's homepage structure. This Vue.js component file acts as the root layout, allowing you to organize content, style the page, and create a visually engaging landing page. With Gridsome's flexibility and Vue.js, you can efficiently design an attractive and dynamic introduction to your site.

Within you'll add the product list that you'll fetch from Hygraph with the query from the next step.

<template>
  <Layout>
    <g-image alt="Example image" src="~/favicon.png" width="135" />

    <h1>Hello, world!</h1>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur
      excepturi labore tempore expedita, et iste tenetur suscipit explicabo!
      Dolores, aperiam non officia eos quod asperiores
    </p>

    <p class="home-links" v-if="$page.hygraph">
      <g-link
        v-for="product in $page.hygraph.products"
        :key="product.slug"
        class="nav__link"
        :to="'product/' + product.slug"
        >{{ product.name }}</g-link
      >
    </p>
  </Layout>
</template>

Step #2 - Construct the query within the index file

In Gridsome, <page-query> enables you to fetch and query data for a specific page directly within your Vue component. This makes it incredibly efficient to request and work with data from the heaedless CMS specific to that page, simplifying the development of dynamic and data-driven web applications.

<page-query>
  {
    hygraph {
      products {
        name
        slug
      }
    }
  }
</page-query>

Start building with Gridsome

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Gridsome project.

Quickstart

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Gridsome project.

Get Started

Learn GraphQL

Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.

Read the Guide

Examples

Look at some of the example projects to see Hygraph in action.

See Examples

Why Hygraph

Choosing Hygraph for your Gridsome project

When selecting a headless CMS for an Gridsome project, opting for one with native GraphQL capabilities is the smart choice. Native GraphQL support streamlines the content retrieval, reducing unnecessary complexity and ensuring you only fetch the data you need.

This efficiency ensures you don't increase the build time of your Gridsome website while simplifying content management. With a headless CMS offering native GraphQL, you empower your Gridsome project with a flexible and agile content layer, making it an ideal match for modern web development needs.

Developer Experience

We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.

Headless CMS

As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.

Management API

Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.

Get started for free, or request a demo to discuss larger projects

Contact sales Get started