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

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin