Vue.js component generator?

Developing a web application is not only about solving interesting problems, working with logic, or with interesting layout. It is also a routine that haunts every developer in the process of work. Starting from creating different files, and writing boilerplate code, ending with writing documentation about the work done.

Part of this routine, however, can always be optimized.

In this article, I want to introduce you to the tool that I developed to minimize the routine when creating Vue.js components – VGENT.

VGENT (Vue Agent) is a CLI (Command Line Interface) application that generates components for the framework Vue.js or Nuxt.js. This tool can be flexibly configured to the needs of the project, and generate components with commands in the terminal.

Installation

You can install VGENT using npm or yarnglobally:

npm install --global vgent

# or

yarn global add vgent

Or locally to a specific project:

npm install --save-dev vgent

# or

yarn add --dev vgent

However, when used locally in a project, you must run commands using yarn or npx:

npx vgent init

# or

yarn vgent init

So, how to use it?

To use VGENT in a project, you need to initialize it and configure it for the project:

vgent init

After running this command, the application will ask questions about where to save components and so on, and at the end create a configuration file in the root of the project .vgentrc with content:

{
  "src": "/",
  "dir": {
    "components": "/components",
    "pages": "/pages"
  },
  "components": {
    "atomicDesign": true,
    "styleLang": "scss",
    "scriptLang": "ts",
    "componentApi": "optionsApi",
    "useIndex": true
  },
  "pages": {
    "useIndex": true
  }
}

Where:

  • src is the working directory of the project

  • dir is an object with paths to the components and pages directory starting from the working directory

    • components is the directory where the components are located

    • pages – this is the directory where the pages are located, someone may have it pagesand someone views

  • components – here are the settings for generating the component

    • atomicDesign is a configuration that includes saving components according to the Atomic Design structure: components/atoms, components/molecules, components/organisms, components/templates

    • styleLang – an option that allows you to select CSS or pre-processor: CSS, SCSS, SASS, LESS

    • scriptLang – an option that allows you to select the programming language of the components: JS or TS

    • componentApi – an option that allows you to select the API of the components, it can be Options API, or Composition API, or when used with TS Class-based components

    • useIndex – this option allows you to save components with the directory: ComponentName/index.vueif the value is false, then it will simply save the file with the name ComponentName.vue

Finally generating the components

Once we have the configuration and VGENT now knows how to generate components, we can start using it. And to generate components, we just need to run the command in the terminal:

vgent make -c <component_name>

And if we use the atomic design structure, then we will also need to specify the type of the component:

# аргумента -a для генерации компонента атома
vgent make -c <component_name> -a

# аргумент -m для генерации компонента молекулы
vgent make -c <component_name> -m

# аргумент -o для генерации компонента организма
vgent make -c <component_name> -o

# аргумент -t для генерации компонента шаблона
vgent make -c <component_name> -t

And to generate pages, we can simply run the command:

vgent make -p <page_name>

However, we still have dynamic pages, and they can also be generated by passing additional arguments:

# аргумент --slug для генерации страницы слага
vgent make -p <page_name> --slug

# аргумент --id для генерации страницы с id
vgent make -p <page_name> --id

The project was originally conceived for personal use, but after that I decided to add additional functionality and post it.

We plan to develop this project further and add functionality for generating other modules in the Nuxt.js or Vue.js ecosystem

I will be glad if this tool helps you to minimize the routine and optimize your development!

Also, I would love feedback!

Links: GitHub, npmjs

Similar Posts

Leave a Reply