Use Hygen to Bootstrap New Components in your Custom Vue UI Library

Hygen is a code generator that saves you time, keeps your file structure consistent, and ensures you don’t forget important steps when creating a new component in a custom component library. Let’s see how it works.

What is Hygen

At it’s core, it’s just a way of copying code from templates to real application files. All templates are stored in a folder called _templates at the root of your project.

A file structure like this would support the command npx hygen component new

_templates
  component
      new
          component.vue.t
          docs.md.t
          ...

Creating New Files

To create new files you would create a template that has front matter and a template body. The to property determines where the newly created file will be stored.

// _templates/component/new/component.vue.t
---
to: packages/library/src/components/<%= name %>/<%= name %>.vue
---

<script setup lang="ts">

</script>

<template>
  <div>
    Hello <%= name %>
  </div>
</template>

You support dynamic placeholders with EJS syntax in both the frontmatter and the template body.

<%= name %>

You can support as many variables as you’d like by defining prompts in a prompt.js within the same directory.

// _templates/component/new/prompt.js
// see types of prompts:
// https://github.com/enquirer/enquirer/tree/master/examples
//

// eslint-disable-next-line
module.exports = [
  {
    type: 'input',
    name: 'name',
    message: 'Component name?'
  }
]

When running the command the user will be prompted and the variable will be replaced in the template with the user provided value.

The generated file would look like this:

// packages/library/src/components/Accordion/Accordion.vue
<script setup lang="ts">

</script>

<template>
  <div>
    Hello Accordion
  </div>
</template>

Use Cases for Creating New Files

This can be used for all kinds of things. When running npx hygen component new you could bootstrap not only component files but also:

• Markdown files to document your component
• Story files for use with Storybook or Histoire

Injecting Lines into Existing Files

It’s also common for UI libraries to expose component .vue source files for importing into end developer’s projects. This makes the library tree-shakeable and works great for projects that use a build tool like Vite.

import Accordian from './Accordian/Accordian.vue'
import AccordianPanel from './AccordianPanel/AccordianPanel.vue'
import Badge from './Badge/Badge.vue'
import Button from './Button/Button.vue'
// etc... 

export {
  Accordian,
  AccordianPanel,
  Badge,
  Button,
}

Easily inject new components into this file. How?

First, add comments in the file where you want to inject the new lines like this:

import Accordian from './Accordian/Accordian.vue'
//...
// import - do not remove this line, used for hygen generations

export {
  Accordian,
  AccordianPanel,
  Badge,
  Button,
  // export - do not remove this line, used for hygen generations
}

Then create a couple more hygen templates, this time with the inject option in the frontmatter.

// _templates/component/new/comp-import.ts.t
---
inject: true
to: packages/library/src/components/components.ts
before: "// import - do not remove this line, used for hygen generations"
skip_if: "import <%= name %> from './<%= name %>/<%= name) %>.vue'"
---
import <%= name %> from './<%= name %>/<%= name %>.vue'

// _templates/component/new/comp-export.ts.t
---
inject: true
to: packages/library/src/components/components.ts
before: "// export - do not remove this line, used for hygen generations"
---
  <%= name %>,

Use Cases for Injecting New Lines into Existing Files

Not only is injection great for exporting all your library components from a single file but it’s also good for adding a link to your new component in your documentation.

Conclusion

Hygen is a handy tool for use in any Vue.js project but it’s especially useful for bootstrapping new components in a custom component library. Learn more about using Hygen to build a custom component library plus a whole lot more in our course: Crafting a Custom Component Library with Vue and Daisy UI.

Article originally posted on Vue School by Daniel Kelly.