# vue-generate-build

> Vue js component generator

Latest version **3.1.6** (published 2022-02-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-generate-build
pnpm add vue-generate-build
yarn add vue-generate-build
bun add vue-generate-build
```

Provides the command `vgb`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.6 |
| Published | 2022-02-03 |
| First published | 2021-12-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 24.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Netanel Basal |
| Maintainers | miguelhemmm |
| Keywords | vue js, vue js component, vue js cli, vue js generator |

## Links

- npm: https://www.npmjs.com/package/vue-generate-build
- Repository: https://github.com/miguelhemmm/vue-generate-component
- Homepage: https://github.com/NetanelBasal/vue-generate-component
- Issues: https://github.com/miguelhemmm/vue-generate-component/issues
- npm.io page: https://npm.io/package/vue-generate-build

## Dependencies (9)

- [del](https://npm.io/package/del.md) ^2.2.0
- [gulp](https://npm.io/package/gulp.md) ^4.0.2
- [swig](https://npm.io/package/swig.md) ^1.4.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.13
- [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.0
- [gulp-babel](https://npm.io/package/gulp-babel.md) ^8.0.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.9.6
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.9.6
- [command-line-args](https://npm.io/package/command-line-args.md) ^2.1.3

## Recent versions

- 3.1.6 (latest) — 2022-02-03
- 3.1.5 — 2022-01-26
- 3.1.4 — 2022-01-26
- 3.1.3 — 2022-01-25
- 3.1.2 — 2022-01-24
- 3.1.1 — 2022-01-24
- 3.1.0 — 2022-01-20
- 3.0.3 — 2022-01-05
- 3.0.2 — 2022-01-05
- 3.0.1 — 2021-12-21

## README

# Vue js component generator [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

CLI util for easy generate Vue js component

## Installation

```js
npm install -g vue-generate-build
```

## Usage

```bash
vgc --help
```

### Create new component (block level)

```bash
vgc footer
```

Will generate four files:

**footer.js**

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

**footer.html**

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

**footer.scss**

```css
.footer {
}
```

**index.vue**

```html
<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

```bash
vgc -b vidanta
```

Will generate five files:

**vidanta.js**

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

  },
};

```

**vidanta.html**

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

**vidanta.scss**

```css
@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**

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

**main.js**

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

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

```

### Create new component single file

```bash
vgc -s home
```

will generate one vue file:

```javascript
<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

```bash
vgc -s home --folder
```

### Create new directive

```bash
vgc -d my-directive
```

will generate:

**my-directive.directive.js**

```javascript
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

```bash
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

```bash
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.

---
_Source: https://npm.io/package/vue-generate-build · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._