Babel Plugin for Vue Functional JSX

2.1.0 · active · verified Sun Apr 19

babel-plugin-jsx-vue-functional is a Babel plugin designed to simplify the creation of Vue.js functional components using JSX syntax. It automatically transforms arrow functions containing JSX into Vue functional component definitions, making it easier to write lightweight, render-only components. The current stable version is 2.1.0. This plugin primarily acts as syntactic sugar, working in conjunction with `@vue/babel-plugin-jsx` (or `transform-vue-jsx`) to enable a more concise way of declaring functional components within a Vue JSX setup. It differentiates itself by explicitly handling the transformation of named arrow functions into `functional: true` component objects, which is particularly useful for performance optimizations and simpler component structures in Vue applications. While its release cadence isn't frequent, updates typically address compatibility or add developer tooling enhancements.

Common errors

```
ReferenceError: A is not defined
```
cause Attempting to call a named arrow function containing JSX directly (e.g., `{A()}`) when it has been transformed into a functional component object by the plugin.

fix Treat the function as a component and use it as a JSX tag (e.g., `<A />`) instead of calling it as a function. This applies since version 2.0.0.
```
Syntax Error: Unexpected token <
```
cause Babel is encountering JSX syntax but the necessary JSX transformation plugins are not correctly configured or ordered.

fix Ensure both `jsx-vue-functional` and `@vue/babel-plugin-jsx` (or `transform-vue-jsx`) are installed and correctly listed in the `plugins` array of your Babel configuration. The order `jsx-vue-functional` then `@vue/babel-plugin-jsx` is generally recommended.

Warnings

breaking Starting with version 2.0.0, this plugin transforms *all* named arrow functions containing JSX into Vue functional components. This means you cannot call such functions directly as regular JavaScript functions anymore; they must be treated as components in JSX.
Fix: If a named arrow function contains JSX, use it as a component tag (e.g., `<MyComponent />`) instead of calling it as a function (e.g., `{MyComponent()}`). If you intend for a function to be called directly and contain JSX, it must *not* be a named arrow function or must be explicitly excluded if the plugin had such an option (which it does not).
gotcha This plugin requires an underlying Vue JSX Babel plugin (like `@vue/babel-plugin-jsx` or the deprecated `transform-vue-jsx`) to be present and correctly configured in your `.babelrc` or `babel.config.js`.
Fix: Ensure `@vue/babel-plugin-jsx` is installed (`npm i -D @vue/babel-plugin-jsx`) and listed in your Babel configuration's `plugins` array, ideally *after* `jsx-vue-functional` for proper transformation order.
gotcha Functional components defined with this plugin will have a `name` property added in development mode for improved Vue Devtools integration, starting from v2.1.0. This adds a minor overhead in development builds.
Fix: No fix needed; this is an enhancement for developer experience and only affects development builds.

Install

npm install babel-plugin-jsx-vue-functional npm
yarn add babel-plugin-jsx-vue-functional yarn
pnpm add babel-plugin-jsx-vue-functional pnpm

Imports

jsx-vue-functional
wrong:
```
import jsxVueFunctional from 'babel-plugin-jsx-vue-functional'
```
correct:
```
plugins: ['jsx-vue-functional']
```
This package is a Babel plugin and is configured in your Babel configuration file (e.g., .babelrc or babel.config.js), not imported directly into application code. It must be listed in the 'plugins' array.
Configuration
```
{
  "plugins": [
    "jsx-vue-functional",
    "@vue/babel-plugin-jsx" 
  ]
}
```
The plugin `jsx-vue-functional` should be listed *before* the primary Vue JSX plugin (`@vue/babel-plugin-jsx` or `transform-vue-jsx`) in your Babel configuration's plugins array to ensure correct processing order.

Quickstart

This quickstart demonstrates how to configure babel-plugin-jsx-vue-functional in your Babel setup and write a simple Vue functional component using the enhanced JSX syntax provided by the plugin.

{
  // .babelrc or babel.config.js
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }]
  ],
  "plugins": [
    "jsx-vue-functional",
    "@vue/babel-plugin-jsx"
  ]
}

// src/components/MyFunctionalComponent.js
// Example of a functional component using JSX syntactic sugar
const GreetUser = ({ props }) => <h1>Hello, {props.name}!</h1>

export const MyComponent = ({ props, listeners }) => (
  <div onClick={listeners.click}>
    <GreetUser name={props.userName} />
    <p>This is a functional component example.</p>
  </div>
)

// This will be transpiled into:
// const GreetUser = {
//   functional: true,
//   render: (h, { props }) => <h1>Hello, {props.name}!</h1>
// }
// export const MyComponent = {
//   functional: true,
//   render: (h, { props, listeners }) => (
//     <div onClick={listeners.click}>
//       <GreetUser name={props.userName} />
//       <p>This is a functional component example.</p>
//     </div>
//   )
// }

view raw JSON →