TheLazy.Dev
Portfolio GitHub

Blog

vue |vuepod |vueclipluginpod |javascript

Generating files with 'vue-cli-plugin-pod'

prakash_chokalingam

prakash chokalingam

Posted on May 15, 2021

Generating files with 'vue-cli-plugin-pod'

If you are working on an awesome vue project, give this awesome vue-cli-pod-plugin 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:

vue add pod
Enter fullscreen mode Exit fullscreen mode

To know more about vue cli plugins click here.

pod install

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>
Enter fullscreen mode Exit fullscreen mode

The pod CLI plugin allows component, directive and mixin as the default file type. It can also be extended.

Generate

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

npm run generate component UI/dropdown
Enter fullscreen mode Exit fullscreen mode

By default, the vue-pod plugin will use the default configuration to generate files in the pod structure. It can be overridden by customising the configs using the below config command.

pod generate

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.

npm run config
Enter fullscreen mode Exit fullscreen mode

Click here to check the available configuration options.

pod config

Rename

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

npm run rename component UI/Dropdown UI/Selectbox
Enter fullscreen mode Exit fullscreen mode

pod rename

Delete

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

npm run delete component UI/Dropdown UI/Selectbox
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

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

GitHub logo webcored / vue-cli-plugin-pod

Extended CLI to manage file templates for vue projects

vue-cli-plugin-pod

Extended cli to manage file templates for vue projects

Refer

https://dev.to/prakash_chokalingam/generating-files-with-vue-cli-plugin-pod-5639

Installation

Add this vue cli plugin to your awesome vue project using the below command:

vue add pod

once installed, your project will have access to the following tasks:

Generate

Creates template files for the specified file type

npm run generate <filetype> <file name or path&gt

Example: npm run generate component UI/Button

Rename

Renames template files for the specified file type

npm run rename <filetype> <old file name or path> <new file name or path&gt

Example: npm run rename component icon avatar

Delete

Deletes template files for the specified file type

npm run delete <filetype> <file name or path&gt

Example: npm run delete component UI/Button

Config

Get a clone of the default pod config file and customize it.

npm run config

The above command will generate a pod.config.js file to the root of your project.

click here to…

View on GitHub
💖 💪 🙅 🚩
prakash_chokalingam
prakash chokalingam

Posted on May 15, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Generating files with 'vue-cli-plugin-pod'
vue Generating files with 'vue-cli-plugin-pod'

May 15, 2021