Introduction

Getting started How it works Fast by default The JAMstack Deployment

Basic Gridsome

Directory structure Project configuration Routing Pages Templates Layouts Components Plugins Data Linking Images Page transitions Populating <head> body & html attributes Environment variables Overriding Index.html

Working with data

Fetching data Querying data Filtering data Client-side data Taxonomy pages Paginated data Add global meta data

Styles and Assets

Use CSS in Gridsome Add custom fonts Add external scripts Add SVG icons

Guides

Add a form * Add a search * Add comments * Add Netlify CMS

API Reference

Gridsome CLI Server API Data store API Pages API Client API Transformer API

Deploy

Netlify AWS Amplify Zeit Now Amazon S3 GitLab Pages Github Pages Google Cloud Platform

Contribute

How to contribute How to create a plugin Code of conduct

Help

Prerequisites How to upgrade Troubleshooting Dev tools FAQ

Populating <head>

Gridsome uses vue-meta to populate Head.

Add global head metadata

Global head metadata is added in src/main.js by using head.{property}.push()

export default function (Vue, { head }) {
  // Add inline CSS
  head.style.push({
    type: 'text/css',
    cssText: '.some-custom-css {color: red}'
  })

  // Add an external CSS file
  head.link.push({
    rel: 'stylesheet',
    href: 'https://some-server.com/external-styleheet.css'
  })
  
  // Add an external Javascript before the closing </body> tag
  head.script.push({
    src: 'https://some-server.com/external-script.js',
    body: true
  })

  // Add a meta tag
  head.meta.push({
    name: 'keywords',
    content: 'HTML,CSS,XML,JavaScript'
  })
}

Add head meta data to pages & templates

Page metadata is added inside page .vue components. For example, src/pages/About.vue would look something like this:

<script>
export default {
  name: 'About',
  metaInfo: {
    title: 'About us',
    meta: [
      { name: 'author', content: 'John Doe' }
    ],
    link: [
      { rel: 'stylesheet', href: '/css/index.css' },
    ]
    // etc...
  }
}
</script>

How to overwrite from child component

If you need to overwrite meta tags, add key property.
Gridsome is passing tagIdKeyName: 'key' to vue-meta as default option. 

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

Available Properties

Property Description Link
style Adds a style tag Docs
script Adds a script tag Docs
meta Adds a meta tag Docs
title Changes title text Docs
titleTemplate Dynamic title text Docs
link Adds a link tag Docs

編輯