Tools: I created my first NPM CLI package (for VueJS) Projects

Installation To be honest, this was a really cool experience. Among the various ways we have to create files — like using the touch command or clicking buttons in VSCode—I thought: "Why not create a command and publish it on NPM for anyone who wants to use it?" So, I did it. I created an NPM package called vue-gen-component. As mentioned in the title, it only works for Vue (for now, anyway!). Installation is simple: npm install -g vue-gen-component Go to the root of your Vue project and run: v-create [name] If you don't provide a name, you will be prompted with three options: Here is an example of it in action: This is what the component looks like: Future Plans: I intend to expand this tool soon. My goal is to allow users to choose exactly which folder they want to create the component in, add a check to see if the file already exists, and potentially include styling options—since many people skip the styles tag nowadays due to Tailwind and other libraries. Package link: https://www.npmjs.com/package/vue-gen-component Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: v-create ? Component name: Dev ? Select language: ts ? Use script setup? Yes 📂 Folder src/components not found. Creating... ✅ Component Dev.vue successfully created at: src/components/ Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: v-create ? Component name: Dev ? Select language: ts ? Use script setup? Yes 📂 Folder src/components not found. Creating... ✅ Component Dev.vue successfully created at: src/components/ CODE_BLOCK: v-create ? Component name: Dev ? Select language: ts ? Use script setup? Yes 📂 Folder src/components not found. Creating... ✅ Component Dev.vue successfully created at: src/components/ CODE_BLOCK: <template> <div> <h1>Component Dev</h1> </div> </template> <script setup lang="ts"></script> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: <template> <div> <h1>Component Dev</h1> </div> </template> <script setup lang="ts"></script> CODE_BLOCK: <template> <div> <h1>Component Dev</h1> </div> </template> <script setup lang="ts"></script> - Language (TS or JS) - Script Setup (Yes/No) default is Yes