question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Suggestion] Command to generate boilerplates like Components/Stores/etc

See original GitHub issue
vue make:component TodoItemComponent

can create a component in the right place with the right boilerplate. This can also be applied to vuex, where a single command can generate multiple files.

I personally feel it’ll be best if the boilerplates are defined in the template repos itself rather than in vue-cli but i’m filing the issue here.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:23
  • Comments:20 (8 by maintainers)

github_iconTop GitHub Comments

6reactions
chrisvfritzcommented, Mar 14, 2016

@skyronic While I have nothing against Laravel, my guess is that vue-cli is trying to emulate npm-style commands instead, so something like vue make component TodoItemComponent (space instead of colon) might be more appropriate. Then as a non-Laravel developer, make also has me thinking of Makefiles, so I’d personally prefer generate or create instead.

I do foresee a complication though. This kind of feature would probably only be really useful with a config file, so that users could modify:

  • the components directory
  • whether components should be generated with a style element
  • whether style elements should be scoped
  • which lang to use for the style element
  • which lang to use for the script
  • which lang to use for the template

User-defined snippets a simpler alternative?

I have enjoyed generators in frameworks like Rails, Ember, etc - but honestly, I think single-file generators are often overkill. Text editors typically allow the definition of extension-scoped snippets, so in Atom for example, this does quite nicely:

'.text.vue':
  'Vue Component':
    prefix: 'vc'
    body: """
      <template>
        ${1}
      </template>

      <script>
        export default {
          data () {
            return {${2}}
          }
        }
      </script>

      <style lang="scss" scoped>
        ${3}
      </style>
    """
4reactions
michaelscheurercommented, May 2, 2018

Why has this important discussion be closed? In my opinion it’s a very important feature to improve the workflow.

There is already a first alternative: https://github.com/NetanelBasal/vue-generate-component

Why don’t start integrating it into vue-cli? What are the disadvantages?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Generate your web-app boilerplate like create-react-app does.
We want to type some kind of command like npx create-react-app app-name and ... css autoprefixer and reset, tests, styled-components, etc.
Read more >
5 Tools for Faster Development in React - Bits and Pieces
React Boilerplate (18k stars)​​ It's quick scaffolding helps to create components, containers, routes, selectors and sagas — and their tests — right from...
Read more >
A Guide to Code Generation - Strumenta - Federico Tomassetti
We can generate code, using programming languages with powerful metaprogramming features; Some IDEs have the functionality to generate boilerplate code, like ...
Read more >
HTML Boilerplate - Visual Studio Marketplace
Usage. Type 'html5-boilerplate' in an HTML file and select the snippet from the auto suggestion dropdown to get the HTML boilerplate. alt ...
Read more >
How to Create the Entire Front-End Boilerplate with a Single ...
We are using the Node.js execSync command to create a folder with the project name as entered. This process takes the command as...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found