Gridsome v0.5

#vue #jamstack #staticsitegenerator

Gridsome is a Vue.js-powered, modern site generator Gridsome.org.

We're really excited to release Gridsome 0.5. The biggest update yet. It has many important features that make data handling easier and a lot more flexible. It opens up a whole new world of what you can build with Gridsome. Easily build Taxonomy pages and connections for any data.

Filtering GraphQL data

Each content type collection in the GraphQL schema has a new filter argument which can be used to filter the results. You can filter by id, title, slug, path or any custom field.

Create taxonomy pages

All references in the GraphQL schema has been a one-way relation. This release introduces a new field called belongsTo for all content types. The field will list all nodes that have a reference back to the current node which makes it very useful to create taxonomy pages etc. The field can also take the same arguments as a collection. And the @paginate directive can be used to automatically paginate the results.

For example, this can be used to:

List blog posts for an author.
List posts for a tag or category.

We're using this feature on Gridsome blog for the authors. The authors here are just a YAML file that lists authors, and then Gridsome magically connects it all.

Variables in Page Query

Previously, only $path and $page were available as variables for page-query in templates. But you can now use $id, $title, $slug, $date or any custom field from the current node. Deep objects and arrays can also be used as variables.

$id resolves to node.id
$value resolves to node.fields.value
$object__value resolves to node.fields.object.value
$array__3__id resolves to node.fields.array[3].id

Environment variables

Sometimes you want configuration values that are different from what you have in the production build. Gridsome now utilizes the dotenv package to make this easy. Special thanks to isoppp for implementing this feature 😄

New Plugin library

The Plugins page now gets plugins from NPM directory. Any plugin with keyword gridsome-plugin will be listed here. You can also use the search field for filtering.

Other features and fixes

Updated to Vue 2.6.
Create references in any node field. Read more.
Hook for configuring the development server. Read more.
Customize default index.html template (by K3TH3R).
Add custom CSS loader options (by maoberlehner).

Breaking changes 😅

There are no breaking API changes, but some changes might have consequences:

External image URLs has previously been converted to objects. Which required you to get the actual URL in a imageField.src property. But those fields are no longer converted to objects.
Filepaths in front matter or markdown must start with ./ or ../ to be resolved and processed. Which means image.png will not be processed, but ./image.png will be.