1. @vue/babel-sugar-inject-h
Babel syntactic sugar for h automatic injection for Vue JSX
@vue/babel-sugar-inject-h
Package: @vue/babel-sugar-inject-h
Created by: vuejs
Last modified: Thu, 25 Aug 2022 11:55:05 GMT
Version: 1.4.0
License: MIT
Downloads: 3,585,576
Repository: https://github.com/vuejs/jsx

Install

npm install @vue/babel-sugar-inject-h
yarn add @vue/babel-sugar-inject-h

@vue/babel-sugar-inject-h

Syntactic sugar for automatic h inject in JSX.

Babel Compatibility Notes

Usage

Install the dependencies:

 # for yarn:
yarn add @vue/babel-sugar-inject-h
# for npm:
npm install @vue/babel-sugar-inject-h --save

In your .babelrc:

 {
  "plugins": ["@vue/babel-sugar-inject-h"]
}

However it is recommended to use the configurable preset instead.

Details

This plugin automatically injects h in every method that has JSX. By using this plugin you don't have to always specifically declare h as first parameter in your render() function.

 // Without @vue/babel-sugar-inject-h
export default {
  render (h) {
    return <button />
  }
}

// With @vue/babel-sugar-inject-h
export default {
  render () {
    return <button />
  }
}

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