1. babel-plugin-jsx-v-model
JSX v-model transform
babel-plugin-jsx-v-model
Package: babel-plugin-jsx-v-model
Created by: nickmessing
Last modified: Mon, 11 Apr 2022 16:39:50 GMT
Version: 2.0.3
License: MIT
Downloads: 312,301
Repository: https://github.com/nickmessing/babel-plugin-jsx-v-model

Install

npm install babel-plugin-jsx-v-model
yarn add babel-plugin-jsx-v-model

Build Status

JSX v-model for Vue JSX

This babel plugin adds some syntactic sugar to JSX.

Usage:

 npm i babel-plugin-jsx-v-model -D

Then add jsx-v-model to your .babelrc file under plugins

example .babelrc:

 {
  "presets": ["es2015"],
  "plugins": ["jsx-v-model", "transform-vue-jsx"]
}

code:

 Vue.component('hello-world', {
  data: () => ({
    text: 'Hello World!'
  }),
  render () {
    return (
      <div>
        <input type="text" v-model={this.text} />
        {this.text}
      </div>
    )
  }
})

Behaviour is similar to vue template's v-model.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code