Skip to content

Automatically generate & insert `emits` property to all Vue files!

License

Notifications You must be signed in to change notification settings

Masa-Shin/generate-vue-emits

Repository files navigation

generate-vue-emits

A cli tool to generate emits options from Vue files.

The tool analizes all emit calls in script tags of Vue SFC files and creates emits option from them, then inserts it into the original files. It supports both composition and options API.

* It cannot detect emit calls in template tags.

🚀 Usage

$ npx generate-vue-emits generate -- ./src/**/*.vue

Here is an example output:

export default {
  name: 'UserList',
  components: {},
+    emits: { input: null, click: null },
  methods: {
    onClick() {
      this.$emit('click')
    }
    onInput(value: string) {
      this.$emit('input', value)
    }
  }
}

* Note that the tool does not format the output itself. It is strongly recommended that you use it with some formatter.

If -t option is set, typed validation functions are inserted instead of null.

$ npx auto-insert-emits generate -t -- ./src/**/*.vue
export default {
  name: 'UserList',
  components: {},
+    emits: { input: (payload: string) => payload, click: () => true },
.
.
.
}

You can also specify the position where emits option should be inserted by -p option (By default it would be inserted as the third item of the options).

$ npx auto-insert-emits generate -p 0 ./src/**/*.vue # inserted on the top.

📄 License

MIT.

🙏 Special Thanks

This repository uses kawamataryo's wounderful suppress-ts-errors repository as a boilerplate.

About

Automatically generate & insert `emits` property to all Vue files!

Resources

License

Stars

Watchers

Forks

Packages

No packages published