Components configuration

Control where your Components live and how you reference them.

We're testing a new components system for v4.4.0 - give it a try !

root

By default, when using a Component you have to reference its path relative to your project root, like this:

src/templates/example.html

<component src="src/components/example.html">
  Content to pass inside component...
</component>

However, you may set a base path for Components in your config.js:

config.js

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

This way, you can reference them relative to that root path and write less code:

src/templates/example.html

<component src="example.html">
  Content to pass inside component...
</component>

Use a custom attribute name:

config.js

module.exports = {
  build: {
    components: {
      attribute: 'href',
    }
  }
}

You can now use href instead of src:

src/templates/example.html

<component href="src/components/example.html">
  Content to pass inside component...
</component>

Use a custom tag name:

config.js

module.exports = {
  build: {
    components: {
      tag: 'module',
    }
  }
}

Example:

src/templates/example.html

<module src="src/components/example.html">
  Content to pass inside component...
</module>