Need help with vue-generate-component?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

NetanelBasal
206 Stars 80 Forks 63 Commits 9 Opened issues

Description

Vue js component generator

Services available

!
?

Need anything else?

Contributors list

# 16,487
TypeScr...
Sass
Angular
settime...
23 commits
# 333,470
ssh
Shell
ssh-cli...
github-...
3 commits
# 483,582
vuejs2
vuejs
JavaScr...
2 commits
# 386,970
vuejs2
vuejs
TypeScr...
HTML
2 commits
# 190,490
TypeScr...
Postgre...
postgre...
vuejs2
2 commits
# 550,183
vuejs2
vuejs
JavaScr...
1 commit
# 19,282
nuxtjs
CSS
api-res...
Nuxt.js
1 commit
# 546,485
vuejs2
vuejs
JavaScr...
1 commit
# 550,184
vuejs2
vuejs
JavaScr...
1 commit
# 169,420
JavaScr...
HTML
vuejs2
vuejs
1 commit

Vue js component generator Awesome

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.js

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

footer.spec.js

import Vue from 'vue';
import FooterComponent from './index.vue';

// Here are some Jasmine 2.0 tests, though you can // use any test runner / assertion library combo you prefer describe('FooterComponent', () => { // Inspect the raw component options it('has a created hook', () => { // expect(typeof FooterComponent.created).toBe('function'); }); // Evaluate the results of functions in // the raw component options it('sets the correct default data', () => { // expect(typeof FooterComponent.data).toBe('function') // const defaultData = FooterComponent.data(); // expect(defaultData.message).toBe('hello!'); }); // Inspect the component instance on mount it('correctly sets the message when created', () => { // const vm = new Vue(FooterComponent).$mount(); // expect(vm.message).toBe('bye!'); }); // Mount an instance and inspect the render output it('renders the correct message', () => { // const Ctor = Vue.extend(FooterComponent); // const vm = new Ctor().$mount(); // expect(vm.$el.textContent).toBe('bye!'); }); });

footer.html


footer.scss

.footer {
}

index.vue


Create new component single file

vgc -s home

will generate one vue file:



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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.