Hello!

The development of the web application is not only working with business logic, creating HTML layouts, and other interesting stuff. It also a facing a lot of routines such as creating directories, files, writing boilerplate code of a framework, writing documentation, and so on.

However, some parts of this routine work we can easily automate.

Somedays, I created a CLI tool to generate components for Vue.js projects only for personal use. And then, I realized, that this tool could be useful for other developers, to optimize their usual workflow.

So, now I want to introduce you – VGENT.

VGENT (Vue Agent) – is a CLI tool to generate boilerplate Vue.js components. VGENT is compatible with Vue.js 2 and Vue.js 3, also with Nuxt.js, and allows you to customize it for any project needs that you may have.

Installing

You can install VGENT to your local machine globally as npm package, and use it in any project. Besides, you can install it to your single project as a dev dependency.

So, to install it globally, you need to run:

npm install --global vgent

# or

yarn global add vgent

And to install it for a single project:

npm install --save-dev vgent

# or

yarn add --dev vgent

But, if you are going to use it in the project, you need to run the commands through npx or yarn:

npx vgent init

# or

yarn vgent init

So, how to use it?

First of all, you need to initialize VGENT in the project and configure it depending on your needs:

vgent init

In the configuration step, VGENT will ask you about your project structure and component template types. So, you have to provide info about directories, where to store generated components, which programming language are you using JS or TS, which component API as an Options API or Composition API, perhaps Class components, and also about style pre-processor or simply CSS.

Then VGENT will create a configuration file .vgentrc, where you can change some configurations lately.

So, after all the configuration steps, you can use commands to generate components and pages:

To generate component run:

vgent make -c <component_name>

But, if you are using an atomic design structure, you can provide also some arguments to declare a component type:

# to generate an atom component use -a argument
vgent make -c <component_name> -a

# to generate a molecule component use -m argument
vgent make -c <component_name> -m

# to generate an organism component use -o argument
vgent make -c <component_name> -o

# to generate a template component use -t argument
vgent make -c <component_name> -t

And let’s talk about page generation, it’s also simple, just run:

vgent make -p <page_name>

To generate dynamic pages, you can also provide some arguments:

# to generate a slug page use --slug argument
vgent make -p <page_name> --slug

# to generate an id page use --id argument
vgent make -p <page_name> --id

Conclusion

I tried to cover a lot of scenarios of use, however, some of you probably use some other structures of components, and it would be great for me if you share your opinion and help me to improve this project.

So, here are the links to GitHub and NPM