https://github.com/njleonzhang/babel-plugin-vue-jsx-sync

jsx plugin for vue sync modifier
https://github.com/njleonzhang/babel-plugin-vue-jsx-sync

Last synced: 8 months ago
JSON representation

jsx plugin for vue sync modifier

• Host: GitHub
• URL: https://github.com/njleonzhang/babel-plugin-vue-jsx-sync
• Owner: njleonzhang
• License: mit
• Created: 2017-12-13T14:15:03.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-10T03:44:15.000Z (over 7 years ago)
• Last Synced: 2025-03-23T19:44:47.782Z (9 months ago)
• Language: JavaScript
• Homepage: https://njleonzhang.github.io/babel-plugin-vue-jsx-sync/
• Size: 259 KB
• Stars: 11
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-jsx-sync - jsx plugin for vue sync modifier (Utilities [🔝](#readme))
• awesome-vue-zh - VSU JSX同步
• awesome-vue - vue-jsx-sync - A Babel plugin that brings vue `sync modifier` to JSX. (Components & Libraries / Utilities)
• awesome-vue - vue-jsx-sync ★4 - A Babel plugin that brings vue `sync modifier` to JSX. (Utilities / JSX)
• awesome-vue - vue-jsx-sync - A Babel plugin that brings vue `sync modifier` to JSX. (Utilities / JSX)

README

          
# babel-plugin-vue-jsx-sync

> jsx plugin for vue [sync modifier](https://vuejs.org/v2/guide/components.html#sync-Modifier), inspired by [babel-plugin-jsx-v-model](https://github.com/nickmessing/babel-plugin-jsx-v-model)

* [Demo](https://njleonzhang.github.io/babel-plugin-vue-jsx-sync/.)

# Usage

* install

```

yarn add -D babel-plugin-vue-jsx-sync

or 

npm install babel-plugin-vue-jsx-sync --save-dev

```

* add the plugin to `.babelrc`

```

{

  "presets": [

    ["env", {

      "modules": false

    }],

    "stage-2"

  ],

  "plugins": ["transform-runtime", "vue-jsx-sync", "transform-vue-jsx"],

  ......

}

}

```

* use in jsx

```

function a() {

  return (

    


      I am newbie

    

  )

}


```

> Notice: we need to use `visible$sync` instead of `visible.sync`, because `visible.sync` is an illegal syntax in `jsx`. 

is complied to:

```

function a() {

  return h(

    "div",

    null,

    [h(

      "component",

      {

        attrs: { visible: this.test },

        on: {

          "update:visible": $$val => {

            this.test = $$val;

          }

        }

      },

      ["I am newbie"]

    )]

  );

}

```

# dev

```

npm install -g parcel-bundler

npm install

npm run dev

```

# build doc

```

npm run doc

```