Vue js component generator

CLI util for easy generate Vue js component

Installation

npm install -g vue-generate-component

Usage

vgc --help

Create new component

vgc footer

Will generate five files:

footer.ts

import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {},
})
export default class Footer extends Vue {}

footer.spec.ts

import Vue from "vue";
import Footer from "./footer.vue";

describe("Footer.vue", () => {});

footer.scoped.scss

.footer {
}

footer.vue

<template>
  <section class="footer">
    <h1>footer Component</h1>
  </section>
</template>
<script src="./footer.ts" lang="ts"></script>
<style src="./footer.scoped.scss" scoped lang="scss"></style>

footer.vue.d.ts

import Footer from "./footer";

export default Footer;

Create new component single file

vgc -s home

will generate one vue file:

<template lang="html">
  <section class="home">
    <h1>home Component</h1>
  </section>
</template>

<script lang="js">
  export default  {
    name: 'home',
    props: [],
    mounted() {

    },
    data() {
      return {

      }
    },
    methods: {

    },
    computed: {

    }
}
</script>

<style scoped lang="scss">
  .home {

  }
</style>

Create new component single file inside new folder

vgc -s home --folder

Create new directive

vgc -d my-directive

will generate:

my-directive.directive.js

import Vue from "vue";

Vue.directive("my-directive", {
  bind() {},
  // When the bound element is inserted into the DOM...
  inserted(el) {
    // el.focus();
  },
  update() {},
  unbind() {},
});

If you want use postfix in file name, use -- postfix

vgc footer --postfix page

Will generate files with postfix:

• footer.page.ts
• footer.page.scss
• footer.page.vue
• footer.page.vue.d.ts
• footer.page.spec.ts

Change the default file types for html, style, script, and spec

sudo vgc --html jade --style less --script js --spec js

Contribute

If you want to fix/improve the templates you're welcome to create a PR.