Yet another Vue component generator
Last updated 8 months ago by belsrc .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @belsrc/vue-gen 
SYNC missed versions from official npm registry.

Vue Component Generator

Build Status Maintainability Code Coverage Total alerts Known Vulnerabilities Last Commit PRs Welcome

Generate new Vue components from the command line.


npm i -g @belsrc/vue-gen


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

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

File Type: Single File Component

└── <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.


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.


Vue-gen is licensed under the MIT license.

Copyright © 2019 Bryan Kizer

Current Tags

  • 1.0.2                                ...           latest (8 months ago)

7 Versions

  • 1.0.2                                ...           8 months ago
  • 1.0.1                                ...           8 months ago
  • 1.0.0                                ...           8 months ago
  • 0.2.2                                ...           8 months ago
  • 0.2.1                                ...           a year ago
  • 0.2.0                                ...           a year ago
  • 0.1.4                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 7
Last Day 0
Last Week 7
Last Month 1
Dependencies (3)
Dev Dependencies (12)
Dependents (0)

Copyright 2014 - 2017 © taobao.org |