Vue js component generator


101.2.0a year ago4 years agoMinified + gzip package size for @calidae/vue-generate-component in KB


Vue js component generator

Developed upon the work of vue-generate-component.

CLI util for easy generate Vue component structure.


npm install -g @calidae/vue-generate-component

If you want to try it out without polluting your global npm, you can use npx:

npx @calidae/vue-generate-component [ARGUMENTS]


Create new component

vgc Footer

Will generate a folder called Footer in your current directory vue component file:


  <div class="footer">
    Footer component

export default {
  name: 'Footer',
  data () {
    return {}

<style scoped></style>

Creating a index.js to simplify the import statements

If you want to create a index.js to simplify the import statements simply add the --index flag or use the alias -i

vgc Footer --index
vgc Footer -i


import Footer from './Footer'

export default Footer

Creating a boilerplate test file

If you want to create a **.spec.js test file as a boilerplate where start wrtiting your own tests simply add the --test flag or use the alias -t

vgc Footer --test
vgc Footer -t


import Footer from './index.js'
import { mount } from '@vue/test-utils'

describe('Footer.vue', () => {
  it('renders main node', () => {
    const wrapper = mount(Footer)


This project tries to solve tedious copy&paste operations from our daily workflow. Please notice that the generated files will require some external libraries such as Vue, @vue/test-utils or Sass loader configuration. Make sure these libraries are available in your project.


  1. Add tests(!)
  2. Add ability to define folder path (now it only creates a folder in the current directory)
  3. swig@1.4.2 is no longer maintained
  4. ...

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.