Generating files with 'vue-cli-plugin-pod'
Tags: vue, vuepod, vueclipluginpod, javascript
Published: 2021-05-15 15:28:18

---
title: Generating files with 'vue-cli-plugin-pod'
published: true
description: Extended CLI to manage file templates for vue projects
tags: vuejs,vuepod,vueclipluginpod,javascript
---

<img src="https://prakashchokalingam.github.io/vue-cli-plugin-pod/logo.png"/>

If you are working on an awesome vue project, give this awesome [vue-cli-pod-plugin](https://www.npmjs.com/package/vue-cli-plugin-pod) a spin.
## Why?

* Create your components and its related files in a snap
* Set file path guidelines
* Enforce conventions and rules via default template file content
* Customise and extend the pod configurations

## How?

Add the plugin to your vue project using the below command:

```bash
vue add pod
```

<small>To know more about [vue cli plugins click here](https://cli.vuejs.org/guide/plugins-and-presets.html#plugins).</small>

![pod install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16tktv3zkerp0uvwqt7g.gif)


Now your project has access to the following pod commands. The tasks can be triggered using yarn or npm.

```
npm run <command> <file type> <file name or file path>
```

The pod CLI plugin allows component, directive and mixin as the default file type. It can also be [extended](#extend).

### Generate

The generate command creates files of a given type using the config.

```bash
npm run generate component UI/dropdown
```

By default, the vue-pod plugin will use the [default configuration](https://github.com/prakashchokalingam/vue-cli-plugin-pod/blob/main/src/pod.config.ts) to generate files in the pod structure. It can be overridden by customising the configs using the below config command.

![pod generate](https://media.githubusercontent.com/media/prakashchokalingam/vue-cli-plugin-pod/gh-pages/demo-assets/pod-generate.gif)


### Config
The config command creates the `pod.config.js` file to the root of your vue project with the default settings. The file can be customised and it will be used by pod cli for further invocations.

```bash
npm run config
```

Click here to check the [available configuration options](https://github.com/prakashchokalingam/vue-cli-plugin-pod#config).

![pod config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy89dmsn96jx88ajgwm7.gif)

### Rename
The rename command replaces the generated files with an alternative name.

```bash
npm run rename component UI/Dropdown UI/Selectbox
```

![pod rename](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71clknh24wi2r4wsfowb.gif)

### Delete
The delete command removes the generated files in the specified path and deletes the directories from the project if it's empty.

```bash
npm run delete component UI/Dropdown UI/Selectbox
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttr9rglchglpwjlq4cua.gif)

### Extend

Vue is incrementally adoptable and it lets you include scalable features like routes, stores(vuex) to your project later. Don't worry! like vue, vue-cli-plugin-pod is also extensible.

Introduce new file types and their file path in the config at ease.

![pod extend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irwba4j52jgiuhqd1evk.gif)


If you like the plugin, donate a star to the repo 🤩

{% github prakashchokalingam/vue-cli-plugin-pod %}