Generate and package Vetur component data

Add IDE autocomplete support for GitLab UI components by generating and packaging Vetur/web-types configuration files. This will enable intelligent code completion for component names, props, events, and slots when developers use GitLab UI components in their Vue.js projects.

Problem

Developers working with GitLab UI components in IDEs (VSCode, JetBrains) currently don't get autocomplete suggestions for:

  • Component names (e.g., typing <gl- doesn't show available components)
  • Component props and their types
  • Available events
  • Slot names

This slows down development and makes it harder to discover available components and their APIs without constantly referring to documentation.

Proposed Solution

Generate IDE-specific metadata files during the package build process:

  • tags.json and attributes.json for Vetur (VSCode extension for Vue 2)
  • web-types.json for JetBrains IDEs (WebStorm, IntelliJ IDEA)

These files will be automatically generated by parsing Vue component files using vue-docgen-api to extract:

  • Component names and descriptions
  • Props with their types, default values, and whether they're required
  • Events with descriptions
  • Slots with descriptions

The generated files will be packaged with the npm distribution and referenced in package.json so IDEs can automatically discover and use them.

Benefits

  • Improved developer experience: Autocomplete for component names, props, events, and slots
  • Faster development: Less context switching to documentation
  • Fewer errors: Type hints and validation for prop values
  • Better discoverability: Developers can explore available components and their APIs directly in their IDE

Related

Edited by Thomas Hutterer