Component Name

Component name is very important field that must be always specified for the following reasons:

  • in generated Vue/React components, component name will highly improve debugging (error messages)
  • it is used in generated React component as React component class name (it will be transformed to CamelCase/PascalCase class name), and will be set as React component displayName
Component name must be all-lowercase and must contain a hyphen

Source Phenome component:

// my-component.jsx
export default {
  name: 'my-component',
  render() {
    return (
      <div>Hello world!</div>
    )
  }
}

Vue compiled output:

export default {
  // name kept as it is
  name: 'my-component',
  render() {
    const _h = this.$createElement;
    return _h('div', 'Hello wordl!')
  }
}

React compiled output:

// Class name based on name prop: my-component -> MyComponent
class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);
  }
  render() {
    return React.createElement('div', null, 'Hello wordl!')
  }
}
// Component displayName based on name prop
MyComponent.displayName = 'my-component';