https://github.com/belsrc/vue-gen

Yet another Vue component generator
https://github.com/belsrc/vue-gen

component generator vue vue-components vue-gen vuejs

Last synced: 12 months ago
JSON representation

Yet another Vue component generator

• Host: GitHub
• URL: https://github.com/belsrc/vue-gen
• Owner: belsrc
• License: other
• Created: 2018-11-17T00:06:31.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-09-06T10:21:31.000Z (almost 2 years ago)
• Last Synced: 2024-09-28T21:34:17.673Z (almost 2 years ago)
• Topics: component, generator, vue, vue-components, vue-gen, vuejs
• Language: JavaScript
• Homepage:
• Size: 1.78 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 43
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# Vue Component Generator

[![Build Status](https://github.com/belsrc/vue-gen/workflows/build-check/badge.svg)](https://github.com/belsrc/vue-gen/actions)

[![Maintainability](https://img.shields.io/codeclimate/maintainability/belsrc/vue-gen.svg?logo=code%20climate&logoWidth=14&style=flat-square)](https://codeclimate.com/github/belsrc/vue-gen/maintainability)

[![Code Coverage](https://img.shields.io/codeclimate/coverage/belsrc/vue-gen?logo=code%20climate&style=flat-square)](https://codeclimate.com/github/belsrc/vue-gen/test_coverage)

[![Total alerts](https://img.shields.io/lgtm/alerts/g/belsrc/vue-gen.svg?logo=lgtm&logoWidth=14&style=flat-square)](https://lgtm.com/projects/g/belsrc/vue-gen/alerts/)

[![Known Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/belsrc/vue-gen.svg?logo=snyk&logoWidth=14&style=flat-square)](https://app.snyk.io/org/belsrc/project/0623bc36-ba88-4751-b85c-6f93c28b5f7c)

[![Last Commit](https://img.shields.io/github/last-commit/belsrc/vue-gen/master.svg?logo=github&logoWidth=14&style=flat-square)](https://github.com/belsrc/vue-gen/commits/master)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/belsrc/vue-gen/pulls)

Generate new Vue components from the command line.

## Install

```bash

npm i -g @belsrc/vue-gen

```

## Usage

```bash

vuegen [component name] [destination]

```

If destination is omitted, then the current directory is used.

Vue-gen uses [inquirer](https://github.com/SBoudrias/Inquirer.js/) 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

```

└── /

    ├── index.jsx

    ├── styles.scss

    └── .test.js

```

File Type: Single File Component

```

└── /

    ├── index.vue

    └── .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](CONTRIBUTING.md) for guidelines about how to proceed.

Trying to report an issue? Please use the [issue template](ISSUE_TEMPLATE.md).

Everyone interacting in the Vue Component Generator codebase and issue tracking is expected to follow the [code of conduct](CODE_OF_CONDUCT.md).

## License

Vue-gen is licensed under the [MIT license](LICENSE).

Copyright © 2019 Bryan Kizer