Layouts configuration

Configure where your Layouts are located, and how you reference them.

root

You may define the path where your Layouts are located:

config.js

module.exports = {
  build: {
    layouts: {
      root: './src/layouts'
    }
  }
}

You will then be able to extend Layouts by referencing them relative to that path - no need to write out the full path relative to your project root:

src/templates/example.html

<extends src="main.html">
  <block name="template">
    <!-- ... -->
  </block>
</extends>

If you're extending a file that also extends a file (i.e. when extending a Template), this will not work. Instead, don't define the root key and only use project root-relative paths (i.e. <extends src="/templates/template.html"> )

tagName

You may also customize the <extends> tag name:

config.js

module.exports = {
  build: {
    layouts: {
      tagName: 'layout'
    }
  }
}

Usage:

src/templates/example.html

<layout src="src/layouts/main.html">
  <block name="template">
    <!-- ... -->
  </block>
</layout>