Vue js component generator

CLI util for easy generate Vue js component

Installation

npm install -g vue-generate-build

Usage

vgc --help

Create new component (block level)

vgc footer

Will generate four files:

footer.js

export default {
  name: 'footer',
  props: [],
  mounted() {},
  data() {
    return {};
  },
  methods: {},
  computed: {}
};

footer.html

<section class="footer">
  <h1>footer Component</h1>
</section>

footer.scss

.footer {
}

index.vue

<template src="./footer.component.html"></template>
<script src="./footer.component.js"></script>
<style src="./footer.component.scss" scoped lang="scss"></style>

Create new build for a brand

vgc -b vidanta

Will generate five files:

vidanta.js

export default {
  name: 'App',
  components: {

  },
};

vidanta.html

<section class="vidanta">
  <h1>Vidanta Component</h1>
</section>

vidanta.scss

@import '../../assets/styles/main.scss';

/*=== Body Color ===*/
$body-color: #4c4c4c;
/*=== Brand Primary Color ===*/
$brand-primary: #002e5d;
/*=== Brand Secondary Color ===*/
$brand-secondary: #61c9ce;
/*=== Brand Primary Tertiary Color ===*/
$brand-tertiary: #b8b8b8;

.footer {
}

index.vue

<template src="./footer.component.html"></template>
<script src="./footer.component.js"></script>
<style src="./footer.component.scss" scoped lang="scss"></style>

main.js

import { createApp } from 'vue';
import Index from './index.vue';
import '../../assets/styles/main.scss';

createApp(Index).mount('#app');

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.js
• footer.page.css
• footer.page.html
• footer.page.spec.js

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

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

Contribute

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