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
Installation is simple: npm install -g vue-gen-component
Usage
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:
- Name
- Language (TS or JS)
- Script Setup (Yes/No) default is Yes
Here is an example of it in action:
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/
This is what the component looks like:
<template>
<div>
<h1>Component Dev</h1>
</div>
</template>
<script setup lang="ts"></script>
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
Top comments (0)