1. @vue/babel-sugar-composition-api-inject-h
Babel syntactic sugar for h automatic injection for Vue JSX with @vue/composition-api
@vue/babel-sugar-composition-api-inject-h
Package: @vue/babel-sugar-composition-api-inject-h
Created by: vuejs
Last modified: Thu, 22 Jun 2023 12:00:38 GMT
Version: 1.4.0
License: MIT
Downloads: 3,537,862
Repository: https://github.com/vuejs/jsx

Install

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

@vue/babel-sugar-composition-api-inject-h

Ported from luwanquan/babel-preset-vca-jsx by @luwanquan

Syntactic sugar for automatic h inject in JSX with @vue/composition-api.

Babel Compatibility Notes

  • This repo is only compatible with Babel 7.x

Usage

Install the dependencies:

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

In your .babelrc:

 {
  "plugins": ["@vue/babel-sugar-composition-api-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 import h from @vue/composition-api.

 // Without @vue/babel-sugar-inject-h
import { h } from '@vue/composition-api'

export default {
  setup() {
    return () => <button />
  },
}
 // With @vue/babel-sugar-inject-h
export default {
  setup() {
    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