Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »


0.0.14 • Public • Published

Craft CMS (GraphQL) source for Gridsome

This package is under development. The API will likely change before v1 is released.

Requires Gridsome v0.7.12 or later

A more detailed write up is on my site

Gridsome setup


Yarn: yarn add @bhws/gridsome-source-craft-graphql Or, NPM: npm install @bhws/gridsome-source-craft-graphql


Add \[CraftPreviewSlug\].vue to your projects .gitignore file. These files are for live preview and shouldn't be added to your git repo.

Source plugin

module.exports = {
  plugins: [
      use: '@bhws/gridsome-source-craft-graphql',
      options: {
        url: 'https://example.com/api',
        fieldName: 'craft',
        typeName: 'craft',
        livePreview: true,
  • url - String required
    The URL of a GraphQL API endpoint to request your schema from.

  • fieldName - String
    Default: 'craft'
    The URL of a GraphQL API endpoint to request your schema from.

  • typeName - String
    Default: 'craft'
    The prefix to be used for your imported schema's field types.

  • headers - Object
    An object of headers to be passed along with your request to the API endpoint. This will generally be used to authenticate your request.

  • livePreview - Boolean | String
    Default: false
    Enable/disable live preview and query being added on frontend (use an environment variable to have this disable this on production). Setting this to dangerouslyAllowAuthorizationHeaders will make Authorization headers available to the build. This may likley be a large security concern so only do this if you know what you are doing.

Enable Live Preview

Add the CraftLivePreview component to you build.

Override App.vue - See Gridsome docs

  <!-- ... -->
  <CraftLivePreview endpoint="https://example.com/api" />
  <!-- ... -->
export default {
  components: {
    CraftLivePreview: () => import ('@bhws/gridsome-source-craft-graphql/CraftLivePreview')

Craft CMS setup

  1. Setup the GraphQL API on Craft

  2. Setup the preview targets

  3. Ensure your preview targets also have ?CraftPreviewSlug={slug} at the end.


npm i @bhws/gridsome-source-craft-graphql

DownloadsWeekly Downloads






Unpacked Size

19.9 kB

Total Files


Last publish


  • avatar