Gridsome

Gridsome is a framework for building fast, decoupled Progressive Web Applications (PWA) and Single Page Applications (SPA) using Vue.js. It uses a GraphQL data layer to query content from various data sources via plugins.

Key features include:

• Automatic page routing: Simplifies page creation and navigation.
• Hot-reloading development: Provides real-time updates during development.
• Vue.js templating: Allows for flexible and unlimited layout possibilities.
• Static page generation: The core functionality is building static pages.
• GraphQL data layer: Provides a unified way to query content from any connected data source.
• Data source plugins: Enables easy connection to CMSs or other data sources.
• Plugin system: An extensible architecture to add functionality to your project.

You can host a static Gridsome website on Google Cloud Platform. There are two primary approaches:

1. HTTP Only: Host directly on a Google Cloud Storage bucket. This is simpler but does not support HTTPS natively.
2. HTTPS Support: Use a Cloud Storage bucket as a backend for a Load Balancing service. This requires configuring a Cloud Storage bucket, a load balancing service, and an external IP address.

Because Gridsome generates static sites, you cannot process form submissions on your own server. You must use an external backend service. The following services are recommended for integration:

• Formspree: A contact form service that handles submissions and integrates with static sites.
• Getform.io: A form backend platform for collecting submissions.
• Form-Data: Provides spam filtering, email notifications, and automation.
• Basin: Manages form submissions and conversion tracking without backend coding.
• Netlify Forms: A built-in feature of Netlify that detects forms in your HTML and handles submissions automatically.

By default, Gridsome uses tagIdKeyName: 'key' for vue-meta. To prevent duplicate tags and allow a child component to overwrite a tag defined by a parent, include a key property in the metadata object. When a child component provides a tag with the same key as a parent, the child's value will take precedence.

// parent component
{
  metaInfo: {
    meta: [
      {
        key: 'description',
        name: 'description',
        content: 'foo'
      }
    ]
  }
}

// child component
{
  metaInfo: {
    meta: [
      {
        key: 'description',
        name: 'description',
        content: 'bar'
      }
    ]
  }
}

Gridsome utilizes Vue Single File Components (SFCs), allowing you to encapsulate HTML, JavaScript, and CSS within a single .vue file. This structure facilitates easier maintenance, testing, and reusability, and enables code-splitting during the Gridsome build process.

<template>
  <div class="card">
    {{ message }}
    <button @click="onClick">
      Change
    </button>
  </div>
</template>

<script>
export default {
  name: 'Card',
  data () {
    return {
      message: 'Try change me!'
    }
  },
  methods: {
    onClick () {
      this.message = 'Here you go :)'
    }
  }
}
</script>

<style>
.card {
  padding: 20px;
  background: #FFF;
}
</style>

Vssue is a Vue component/plugin that enables comments for static pages by storing them as issues in code hosting platforms like GitHub, GitLab, Bitbucket, or Gitee.

For specific Gridsome implementation details, refer to the Vssue Gridsome documentation.

Gridsome is a static site generator that creates fast, SEO-friendly websites. It works by generating static HTML files that hydrate into a Vue.js-powered SPA (Single Page Application) once loaded in the browser.

The Core Workflow

1. Data Fetching: Source plugins fetch content from local files or external APIs.
2. Data Storage: Data is stored in a local database.
3. GraphQL Layer: A unified GraphQL data layer allows you to query exactly the data you need for your Vue.js components.
4. Static Generation: At build time, the queried data is stored as static JSON files, and HTML is generated from your templates.

Every collection automatically adds two root fields to the GraphQL schema based on the collection name. For example, if your collection is named Post, the following fields are available:

• post: Used to retrieve a single node by its id.
• allPost: Used to retrieve a list of nodes (supports sorting and filtering).

Note on Schema Generation: By default, Gridsome uses automatic schema generation based on discovered data at startup. However, if your data is dynamic or fields might be missing, you should use the Schema API to define a persistent schema. Custom schema types for a collection must implement the Node interface.

Gridsome achieves high performance through several integrated architectural patterns:

1. Pre-rendered HTML: The gridsome build command generates static HTML files at build time. These can be hosted on any CDN, providing fast Time to First Byte (TTFB) and high security.
2. Automatic Code Splitting: Every import is bundled and served per page, ensuring users only download the code necessary for the current route.
3. The PRPL Pattern: Gridsome follows the PRPL pattern (Push critical resources, Render initial route, Pre-cache remaining routes, Lazy-load remaining routes) to optimize app delivery and launch.
4. Hydration (Vue.js SPA): After the static HTML is loaded, Vue.js takes over and hydrates the page into a fully functional Single Page Application (SPA). Once hydrated, navigation uses code-splitted JS chunks for seamless browsing.

Gridsome uses GraphQL to fetch data into Pages, Templates, and Components. You add queries using specific Vue component blocks:

• Use <page-query> in Pages & Templates. The results are available via the $page property.
• Use <static-query> in Components. The results are available via the $static property.

When writing a query, you can use an alias (e.g., posts: allWordPressPost) to name your data. If you use an alias, the data is accessed via $page.posts or $static.posts. If you do not use an alias, it is accessed via the collection name, e.g., $page.allWordPressPost.

<template>
  <div v-for="edge in $page.posts.edges" :key="edge.node.id">
    <h2>{{ edge.node.title }}</h2>
  </div>
</template>

<page-query>
query {
  posts: allWordPressPost {
    edges {
      node {
        id
        title
      }
    }
  }
}
</page-query>