Creating new components

Tip: also consult the guidelines for the naming of things and coding standards.

1. Install the vf-component-generator package
   • yarn add @visual-framework/vf-component-generator --dev
2. Install Yeoman
   • If you've come this far and you don't have yo, you should be able to install it with yarn global add yo@latest
   • If you get stuck, see the official install guide
3. Create a new component
   • Run vf-component-generator and answer the questions when prompted.
     • Type of component: See component guidance
     • Name of component: See component naming guidance
     • npm package: If you're making something interesting (probably not an 'element'), then saying 'yes' will allow the component to be shared as an optional part of the framework on npm.
   • Your customised template component will:
     • be in the /components directory.
     • contain a number of pre-generated files.
4. Maintain a CHANGELOG.md
   • Add a line of what is new in your component.
   • Use sentence styling.
   • Keep your notes, short and punchy.
   • End your sentences with periods.
     • https://github.com/visual-framework/vf-core/issues/1286
   • Link to any related issues or discussions, such as the above.
5. Add the @import 'vf-your-component.scss'; to /assets/scss/styles.scss.
6. Developing your component
   • Edit your template files in the /components/your-component-name folder
     • For further guidance on component configuration, consult the comments in the component template files.
   • Run gulp vf-dev to compile and preview the component
7. Sharing you component back
   • Publish it to npm; and/or
   • If you think your component is useful to the global vf-core community, make a Pull Request or open an issue to discuss.

---

See also

• Component list
• About components and patterns
• Component versioning interoperability
• Legacy browser support