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

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

Daniel Kelly
Daniel Kelly
April 8th 2024

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.

screenshot hygen in terminal

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.

Start learning Vue.js for free

Daniel Kelly
Daniel Kelly
Daniel is the lead instructor at Vue School and enjoys helping other developers reach their full potential. He has 10+ years of developer experience using technologies including Vue.js, Nuxt.js, and Laravel.

Comments

Latest Vue School Articles

How to Access Vue Refs Defined in Script Setup within Unit Tests

How to Access Vue Refs Defined in Script Setup within Unit Tests

Need to access a component’s data defined within script setup? In this article we’ll teach you how! But be warned you probably want to approach your test a little differently.
Daniel Kelly
Daniel Kelly
48 Hours of Unlimited Vue.js Learning: Your Guide to Vue School&#8217;s Free Weekend

48 Hours of Unlimited Vue.js Learning: Your Guide to Vue School’s Free Weekend

Vue School’s Free Weekend is coming! For 48 hours, you’ll get free access to over 1300 lessons across 65 expert courses. Whether you’re a beginner or advanced, this is your chance to explore new Vue.js topics.
Maria Panagiotidou
Maria Panagiotidou

Our goal is to be the number one source of Vue.js knowledge for all skill levels. We offer the knowledge of our industry leaders through awesome video courses for a ridiculously low price.

More than 200.000 users have already joined us. You are welcome too!

Follow us on Social

© All rights reserved. Made with ❤️ by BitterBrains, Inc.