@vue/babel-preset-jsx

What is @vue/babel-preset-jsx?

@vue/babel-preset-jsx is a Babel preset that allows you to use JSX syntax in Vue.js applications. It provides a way to write Vue components using JSX, which can be more familiar to developers coming from a React background. This preset simplifies the process of integrating JSX into Vue projects and ensures compatibility with Vue's reactivity system.

What are @vue/babel-preset-jsx's main functionalities?

JSX Syntax in Vue Components

This feature allows you to write Vue components using JSX syntax. The code sample demonstrates a simple Vue component that renders a div with the text 'Hello, JSX!'.

export default { render() { return <div>Hello, JSX!</div> } }

Using Props in JSX

This feature shows how to use props in a Vue component written with JSX. The code sample demonstrates a component that takes a 'message' prop and renders it inside a div.

export default { props: ['message'], render() { return <div>{this.message}</div> } }

Event Handling in JSX

This feature demonstrates how to handle events in a Vue component using JSX. The code sample shows a button that displays an alert when clicked.

export default { render() { return <button onClick={() => alert('Clicked!')}>Click Me</button> } }

Other packages similar to @vue/babel-preset-jsx

babel-plugin-transform-vue-jsx

babel-plugin-transform-vue-jsx is another Babel plugin that enables the use of JSX syntax in Vue.js applications. It is similar to @vue/babel-preset-jsx but is a standalone plugin rather than a preset. It provides similar functionality, allowing developers to write Vue components using JSX.

vue-jsx

vue-jsx is a package that provides support for JSX in Vue.js. It offers a similar feature set to @vue/babel-preset-jsx, enabling developers to write Vue components using JSX syntax. It is often used in conjunction with Babel to transform JSX code into standard JavaScript.

README

@vue/babel-preset-jsx

Configurable preset for Vue JSX plugins.

Babel Compatibility Notes

• This repo is only compatible with Babel 7.x, for 6.x please use vuejs/babel-plugin-transform-vue-jsx

Usage

Install the dependencies:

# for yarn:
yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
# for npm:
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save

In your babel.config.js:

module.exports = {
  presets: ['@vue/babel-preset-jsx'],
}

You can toggle specific features, by default all features (except compositionAPI) are enabled, e.g.:

module.exports = {
  presets: [
    [
      '@vue/babel-preset-jsx',
      {
        vModel: false,
        compositionAPI: true,
      },
    ],
  ],
}

Options are:

• compositionAPI - Enables @vue/babel-sugar-composition-api-inject-h and @vue/babel-sugar-composition-api-render-instance, support returning render function in setup.
  • The default value is false;
  • When set to 'auto' (or true), it will detect the Vue version in the project. If it's >= 2.7, it will import the composition utilities from vue, otherwise from @vue/composition-api;
  • When set to 'native' (or 'naruto'), it will always import the composition utilities from vue
  • When set to plugin, it will always import the composition utilities from @vue/composition-api, but it will redirect to 'vue' itself when the vue version is 2.7.x
  • When set to vue-demi, it will always import the composition utilities from vue-demi
  • When set to an object like { importSource: string; }, it will always import the composition utilities from the importSource you set
• functional @vue/babel-sugar-functional-vue - Functional components syntactic sugar
• injectH @vue/babel-sugar-inject-h - Automatic h injection syntactic sugar
• vModel @vue/babel-sugar-v-model - vModel syntactic sugar
• vOn @vue/babel-sugar-v-on - vOn syntactic sugar