#Project configuration

Gridsome requires /gridsome.config.js to work. Plugin 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 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

#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

#css.split

• Type boolean Default: 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