https://github.com/mitscherlich/babel-sugar-v-bind-sync

Babel syntactic sugar for v-bind sync modifier support in Vue JSX
https://github.com/mitscherlich/babel-sugar-v-bind-sync

babel-syntactic-sugar jsx vue-jsx

Last synced: 22 days ago
JSON representation

Babel syntactic sugar for v-bind sync modifier support in Vue JSX

• Host: GitHub
• URL: https://github.com/mitscherlich/babel-sugar-v-bind-sync
• Owner: Mitscherlich
• License: mit
• Created: 2021-02-14T16:15:59.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-21T02:56:26.000Z (8 months ago)
• Last Synced: 2024-10-14T18:40:39.119Z (22 days ago)
• Topics: babel-syntactic-sugar, jsx, vue-jsx
• Language: JavaScript
• Homepage:
• Size: 866 KB
• Stars: 1
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# babel-sugar-v-bind-sync

Syntactic sugar for v-bind `sync` modifier in JSX.

## Babel Compatibility Notes

This repo is only compatible with Babel 7.x, for 6.x please use [njleonzhang/babel-plugin-vue-jsx-sync](https://github.com/njleonzhang/babel-plugin-vue-jsx-sync)

## Usage

Install the dependencies:

```sh

# for yarn:

yarn add -D babel-sugar-v-bind-sync

# for npm:

npm install babel-sugar-v-bind-sync --save-dev

```

In your `.babelrc`:

```js

module.exports = {

  plugins: [require('babel-sugar-v-bind-sync')]

}

```

## Details

This plugin adds v-bind `sync` modifier to the JSX and tries to mirror the same behavior as in vue-template-compiler, with a few differences:

1. You should use underscore (`_`) instead of dot (`.`) for `sync` modifier (`prop_sync={this.bar}`).

2. It is recommended to use camelCase version of it (`propName_sync`) in JSX, but you can use kebab-case too (`prop-name_sync`).

```jsx

export default {

  data() {

    return {

      bar: 'naz',

    };

  },

  render(h) {

    return (

      


        

      

    );

  },

};

```