Vue CLI Plugin Generator

Vue CLI Plugin Generator is a Vue ClI plugin to generate (.vue)files in your project. For Example for scaffolding Vue Component files. The Plugin uses the buildin plugin generator of Vue CLI.

Still in Alpha!

Getting Started

Install the package:

vue add generator

yarn make

Configure your template

To config the generator, you can use the generator.config.js in the root of the folder.

module.exports = {
  templates: [
    {
      name: 'component',
      label: 'Component',
      template: {
         // Define your templates here, first array is the target location, the value is the location of the template, the default location is in ROOT/.generator/templates/.
         // You can also define multiple templates
        ['./src/components/${name.pascalCase}.vue']: 'component.vue'
      },
      renameFile: true, // can be true || false
      prompts: [
        // Config your custom questions
        {
          type: 'confirm',
          name: 'scoped',
          message: 'This component with scoped styling?',
          default: true,
          group: 'component',
          when: answers => answers.type === 'component',
        },
      ]
    },
  ]
}

In the .generator/templatesfolder you can place your templates for the generator. For example your Vue component.

Templating files

The questions that are defined in the generator.config.jsyou can use to generate you templates. name`key in the questions you can use in the template files. For example the qeustion: Scoped styling. With EJS used by Vue CLI you can make for example If-statements to generate part of your template.

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: '<%%= name.pascalCase %%>',
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<%% if (scoped) { %%>
<style scoped>
<%% } else { %%>
<style>
<%% } %%>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Issues

Please help with improving this package, if you have issues you can make the issues in the issues tab.