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.

Latest Vue School Articles

How to Create Supabase Database Migration Files in Vue.js

How to Create Supabase Database Migration Files in Vue.js

In this guide, we’ll focus on creating migration files for a remote Supabase database, ensuring that our the database is updated directly from within our Vue.js project.
Mostafa Said
Mostafa Said
How to Write a Vue Composable Step-by-Step

How to Write a Vue Composable Step-by-Step

Want to learn how to create robust and intuitive Vue.js composables? Learn how step by step in this article.
Daniel Kelly
Daniel Kelly

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 120.000 users have already joined us. You are welcome too!

Follow us on Social

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