Gridsome Vendure hydration example

gridsome.config.js

module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: '@gridsome/source-graphql',
      options: {
        url: 'https://yourwebshop-api.com/graphql',
        fieldName: 'Vendure'
      },
    },
  ],
}

Index.vue

<template>
  <div>
    <div v-for="product in $page.Vendure.products.items" >
      <img :src="product.featuredAsset.preview" class="thumbnail" />
      <p :class="product.soldOut ? 'sold-out' : ''" class="product-title">{{ product.name }}</p>
      <p :class="product.soldOut ? 'sold-out' : ''">{{ product.variants[0].priceWithTax }}</p>
      <p v-if="product.soldOut">SOLD OUT</p>
    </div>
  </div>
</template>
<page-query>
query {
  Vendure {
    products {
      items {
        id
        name
        featuredAsset {
          preview
        }
        variants {
          priceWithTax
        }
      }
    }
  }
}
</page-query>
<script>
import {GraphQLClient} from 'graphql-request';

export default {
  async mounted() {
    const client = new GraphQLClient('https://yourwebshop-api.com/graphql');
    // Query all products, but this time with the `variants.available` field.
    // `variants.available` is a custom field that displays the stock level of productVariants
    const {products: {items: products}} = await client.request(`{
                                                        products {
                                                            items {
                                                                id
                                                                variants {
                                                                    available
                                                                }
                                                            }
                                                        }
                                                      }`);
    this.$page.Vendure.products.items = this.$page.Vendure.products.items.map(product => {
      // Loop all products on the statically generated page, and check if its sold out
      const clientSideProduct = products.find(p => p.id === product.id);
      if (clientSideProduct) {
        // Set product.soldOut
        product.soldOut = !clientSideProduct.variants.find(variant => variant.available > 0);
      }
      return product;
    })
  }
}
</script>

<style>
.thumbnail {
  width: 20%;
}
.product-title {
  font-weight: bold;
}
.sold-out {
  text-decoration: line-through;
}
</style>

Index.vue-page-query

<page-query>
query {
  Vendure {
    products {
      items {
        id
        name
        featuredAsset {
          preview
        }
        variants {
          priceWithTax
        }
      }
    }
  }
}
</page-query>

Index.vue-script

<script>
import {GraphQLClient} from 'graphql-request';

export default {
  async mounted() {
    const client = new GraphQLClient('https://yourwebshop-api.com/graphql');
    // Query all products, but this time with the `variants.available` field.
    // `variants.available` is a custom field that displays the stock level of productVariants
    const {products: {items: products}} = await client.request(`{
                                                        products {
                                                            items {
                                                                id
                                                                variants {
                                                                    available
                                                                }
                                                            }
                                                        }
                                                      }`);
    this.$page.Vendure.products.items = this.$page.Vendure.products.items.map(product => {
      // Loop all products on the statically generated page, and check if its sold out
      const clientSideProduct = products.find(p => p.id === product.id);
      if (clientSideProduct) {
        // Set product.soldOut
        product.soldOut = !clientSideProduct.variants.find(variant => variant.available > 0);
      }
      return product;
    })
  }
}
</script>

Index.vue-template

<template>
  <div>
    <div v-for="product in $page.Vendure.products.items" >
      <img :src="product.featuredAsset.preview" class="thumbnail" />
      <p :class="product.soldOut ? 'sold-out' : ''" class="product-title">{{ product.name }}</p>
      <p :class="product.soldOut ? 'sold-out' : ''">{{ product.variants[0].priceWithTax }}</p>
      <p v-if="product.soldOut">SOLD OUT</p>
    </div>
  </div>
</template>