You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
YZY eef3e25414
branch149
11 months ago
..
dist branch149 11 months ago
README.md branch149 11 months ago
package.json branch149 11 months ago

README.md

@vue/babel-sugar-v-on

Syntactic sugar for v-on in JSX.

Babel Compatibility Notes

Usage

Install the dependencies:

# for yarn:
yarn add @vue/babel-sugar-v-on
# for npm:
npm install @vue/babel-sugar-v-on --save

In your .babelrc:

{
  "plugins": ["@vue/babel-sugar-v-on"]
}

However it is recommended to use the configurable preset instead.

Details

This plugin adds v-on to the JSX and tries to mirror the same behaviour as in vue-template-compiler, with a few differences:

  1. You should use underscore (_) instead of dot (.) for modifiers (vOn:click_prevent={this.test})
  2. It is recommended to use camelCase version of it (vOn) in JSX, but you can use kebab-case too (v-on).
export default {
  methods: {
    test() {
      console.log('Hello World')
    },
  },
  render(h) {
    return (
      <div>
        <a href="https://vuejs.org" vOn:click={this.test}>Vue</a>
      </div>
    )
  },
}