@travisreynolds/gridsome-source-strapi v0.4.4

@travisreynolds/gridsome-source-strapi

Forked Strapi source plugin for Gridsome, with image downloading

Install

• yarn add @travisreynolds/gridsome-source-strapi
• npm install @travisreynolds/gridsome-source-strapi

Usage

module.exports = {
  plugins: [
    {
      use: '@travisreynolds/gridsome-source-strapi',
      options: {
        apiURL: 'http://localhost:1337',
        prefix: 'Strapi' // Default is 'Strapi'
        debug: true // Adds verbose logs
        images: true // Use all defaults
        images: { // OR
          dir: './src/assets/strapi', // Optional, default
          key: 'downloaded', // Optional, default
          cache: true // Optional, default
        }
      }
    }
  ]
}

Strapi Permissions

You will need to enable a couple of Strapi permissions to enable this plugin to work correctly. To do this, login to your Strapi instance, and navigate to the Settings page. Select the Roles page under Users & Permissions Plugin, and click on the Public role. Scroll down to Permissions, and look for the Content Manager section - click to open if necessary, and check the findcomponents option (under Components) and the findcontenttypes option (under Content-Types). Finally, click the Save button to save your changes.

Options

Image Downloads

This plugin supports image downloading, to allow you to use g-image - this also means you can host Strapi locally, with no need to host it online or use an image CDN for media access.

To enable this functionality, simply add an images config option with either a boolean true to use all defaults, or an object to use custom options.

There are some additional options if you need, to specify where the images should be downloaded to (this path can be added to .gitignore), as well as the GraphQL field the downloaded image is accessible under, and whether to cache images or re-download them every time.

Dynamic Zones

This plugin also supports Strapi's Dynamic Zones feature - it will turn the field into a Union type, to allow you to use GraphQL to query the available components inside the dynamic zone. You can use the GraphQL explorer to check what types you can query.

For example, if there is a Page type in Strapi, which has a Dynamic Zone under the key content with two components Hero and FeaturedPost:

StrapiPage.vue

<template>
  <Layout>
    <h1>{{ page.title }}</h1>
    <br />
    <component
      v-for="(component, i) in page.content"
      :key="i"
      :is="findComponent(component.__typename)"
      v-bind="component" />
  </Layout>
</template>

<script>
// Blocks
import HeroBlock from '@/components/blocks/HeroBlock.vue'
import FeaturedPostBlock from '@/components/blocks/FeaturedPostBlock.vue'

const componentsMap = new Map([
  ['StrapiSectionsHero', HeroBlock],
  ['StrapiSectionsFeaturedPost', FeaturedPostBlock]
])

export default {
  name: 'Page',
  computed: {
    page () { return this.$page.strapiPage }
  },
  methods: {
    getComponent (key) {
      return componentsMap.get(key)
    }
  }
}
</script>

<page-query>
query Page ($id: ID!) {
  strapiPage (id: $id) {
    id
    title
    content {
      __typename

      ... on StrapiSectionsHero {
        id
        title
        subtitle
        backgroundImage {
          alt
          downloaded
        }
      }

      ... on StrapiSectionsFeaturedPost {
        id
        title
        path
        featuredImage {
          alt
          downloaded
        }
      }
    }
  }
}
</page-query>

FeaturedPost.vue

<template>
  <g-link :to="path">
    <h3>{{ title }}</h3>
    <g-image v-if="featuredImage" :src="featuredImage.downloaded" :alt="featuredImage.alt" />
  </g-link>
</template>

<script>
export default {
  name: 'FeaturedPost',
  props: {
    title: {
      type: String,
      default: ''
    },
    path: {
      type: String,
      default: ''
    },
    featuredImage: {
      type: Object,
      default: () => null
    }
  }
}
</script>