Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/travis-r6s/gridsome-source-strapi
A forked version of the official Gridsome Strapi plugin, with image downloading.
https://github.com/travis-r6s/gridsome-source-strapi
Last synced: 26 days ago
JSON representation
A forked version of the official Gridsome Strapi plugin, with image downloading.
- Host: GitHub
- URL: https://github.com/travis-r6s/gridsome-source-strapi
- Owner: travis-r6s
- Created: 2021-08-11T20:55:32.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-27T12:29:40.000Z (about 1 year ago)
- Last Synced: 2024-12-08T21:43:56.719Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 65.4 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @travisreynolds/gridsome-source-strapi
> Forked [Strapi](https://strapi.io/) source plugin for Gridsome, with image downloading
## Install
- `yarn add @travisreynolds/gridsome-source-strapi`
- `npm install @travisreynolds/gridsome-source-strapi`
## Usage
```js
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
| Name | Type | Default | Description |
|------|------|---------|-------------|
| `apiURL` | `String` | `` | Required - the URL to your Strapi instance. |
| `prefix` | `String` | `Strapi` | All types that this plugin will create will be prefixed with this. |
| `debug` | `Boolean` | `false` | Enabled verbose logging - for example what types are being downloaded. |
| `limit` | `Number` | `100` | How many items should be fetched in one API call. |
| `concurrency` | `Number` | `10` | How many content types should be fetched at once. |
## 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.
| Name | Type | Default | Description |
|------|------|---------|-------------|
| `dir` | `String` | `./src/assets/strapi` | A relative path to where images should be downloaded to. |
| `key` | `String` | `downloaded` | What the field that contains the downloaded image should be called. |
| `cache` | `Boolean` | `true` | Whether to cache images, or re-download each time. |
| `concurrency` | `Number` | `10` | How many images should be downloaded at once. |
## Dynamic Zones
This plugin also supports Strapi's Dynamic Zones feature - it will turn the field into a [Union type](https://graphql.org/learn/schema/#union-types), to allow you to use GraphQL to query the available components inside the dynamic zone. You can use the [GraphQL explorer](http://localhost:8080/___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`
```vue
{{ page.title }}
// 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)
}
}
}
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
}
}
}
}
}
```
`FeaturedPost.vue`
```vue
{{ title }}
export default {
name: 'FeaturedPost',
props: {
title: {
type: String,
default: ''
},
path: {
type: String,
default: ''
},
featuredImage: {
type: Object,
default: () => null
}
}
}
```