#Project configuration

Gridsome requires gridsome.config.js to work. Plugins and project settings are located here. A basic configuration file would look something like this:

module.exports = {
  siteName: 'Gridsome',
  siteUrl: 'https://www.gridsome.org',
  plugins: []
}

#siteName

• Type string
• Default <dirname>

Set a name for your project. The name is typically used in the title tag.

#siteDescription

• Type string
• Default ''

The description is used as description on your frontpage.

#siteUrl

• Type string
• Default ''

#pathPrefix

• Type string
• Default ''

Gridsome assumes your project is served from the root of your domain. Change this option to '/my-app' if your project will be hosted in a subdirectory called my-app.

#titleTemplate

• Type string
• Default %s - <siteName>

Set a template for the title tag. The %s placeholder is replaced with title from metaInfo that you set in your pages.

#plugins

• Type Array
• Default []

Activate plugins by adding them to the plugins array.

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        route: '/blog/:year/:month/:day/:slug',
        typeName: 'Post'
      }
    }
  ]
}

Read more about how to use plugins

#templates

• Type object
• Default {}

Define routes and templates for collections.

Read more about using templates

#metadata

• Type object
• Default {}

Add global metadata to the GraphQL schema.

Read more about global metadata

#icon

• Type string | Object
• Default './src/favicon.png'

Gridsome will use any image located at src/favicon.png as favicon and touchicon by default, but you can define another path or sizes etc. The icon should be a square and minimum 16 pixels. The favicon will be resized to 16, 32, 96 pixels. And the touchicon will be resized to 76, 152, 120, 167, 180 pixels by default.

module.exports = {
  icon: './src/my-icon.png'
}

Use a different image for touch icons:

module.exports = {
  icon: {
    favicon: './src/my-favicon.png',
    touchicon: './src/my-touchicon.png'
  }
}

Define custom sizes and disable effects on iOS < 7 devices:

module.exports = {
  icon: {
    favicon: {
      src: './src/my-favicon.png',
      sizes: [16, 32, 96]
    },
    touchicon: {
      src: './src/my-touchicon.png',
      sizes: [76, 152, 120, 167],
      precomposed: true
    }
  }
}

#configureWebpack

• Type Object | Function

The option will be merged with the internal config if it is an object.

module.exports = {
  configureWebpack: {
    // merged with the internal config
  }
}

If the option is a function, it will get the internal config as its first argument. You can either modify the argument or return a new config object that will override the internal webpack config.

const merge = require('webpack-merge')

module.exports = {
  configureWebpack(config) {
    return merge({ /* custom config */ }, config)
  }
}

#chainWebpack

• Type Function

A function that will receive an instance of ChainableConfig powered by webpack-chain.

#runtimeCompiler

• Type boolean
• Default false

Include the Vue template compiler at runtime.

#configureServer

• Type Function

Configure the development server.

Read more about configuring the development server

#permalinks.trailingSlash

• Type boolean
• Default true

Appends a trailing slash to pages and templates by default.

Pages with dynamic routes will not include a trailing slash when this option is enabled and must have extra rewrite rules on the server to work properly. Also, static paths for <g-link> will not include a trailing slash automatically but should be included in the path:

<g-link to="/about-us/">About us</g-link>

#permalinks.slugify

• Type function | object

Use a custom slugify method. Default slugifyer is @sindresorhus/slugify.

module.exports = {
  permalinks: {
    slugify: {
      use: 'another-slugify-library',
      options: {}
    }
  }
}

#css.split

• Type booleanDefault: false

Split CSS into multiple chunks. Splitting is disabled by default. Splitting CSS can result in weird behaviors.

#css.loaderOptions

• Type Object
• Default {}

Pass options to CSS-related loaders. For example:

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // options here will be passed to sass-loader
      },
      less: {
        // options here will be passed to less-loader
      }
    }
  }
}

Supported loaders are:

• css-loader
• postcss-loader
• sass-loader
• less-loader
• stylus-loader

#host

• Type string
• Default 'localhost'

#port

• Type number
• Default 8080

#outputDir

• Type string
• Default 'dist'

The directory where the production build files will be generated in when running gridsome build.