Vue Component Generator

Generate new Vue components from the command line.

Install

npm i -g @belsrc/vue-gen

Usage

vuegen [component name] [destination]

If destination is omitted, then the current directory is used. Vue-gen uses inquirer for interactive generation options. The interactive steps can be skipped if the -q/--quiet flag is passed. This automatically sets file type jsx, stand component, no state.

Component name? # not shown if name given in command
What type of file?
  * JSX Component
  * Single File Component
Is this a functional component? (y/N)
What type of component?
  * Standard Component
  * Router Page
Does component have state? (y/N)

Selecting yes for functional component will cause the last two questions to be skipped, as they no longer apply.

Generated Files

File Type: JSX Component

<destination>
└── <component name>/
    ├── index.jsx
    ├── styles.scss
    └── <component name>.test.js

File Type: Single File Component

<destination>
└── <component name>/
    ├── index.vue
    └── <component name>.test.js

Component name is kebab cased for folder/file/css class purposes. And Pascal case for the name property in the component.

"Is this a functional component," if yes, will add the appropriate functional tag for the file type and remove the blocks that would be referenced via this.

Router Page adds the beforeRouteUpdate guard to the file, along with a loadPageData method that is called from created and the beforeRouteUpdate.

Does component have state?, if yes, will add import { mapState, mapGetters, mapActions } from 'vuex'; along with the corresponding ...mapX({}) calls.

Contributing

Contributions encouraged! Please check out the contributing guide for guidelines about how to proceed.

Trying to report an issue? Please use the issue template.

Everyone interacting in the Vue Component Generator codebase and issue tracking is expected to follow the code of conduct.

License

Vue-gen is licensed under the MIT license.

Copyright © 2019 Bryan Kizer