Registry / web-framework / babel-plugin-jsx-vue-functional

babel-plugin-jsx-vue-functional

library2.1.0jsnpmunverified

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.

web-framework

npm install babel-plugin-jsx-vue-functional

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-JSX-V

babel-plugin-jsx-vue-functional

web-frameworkjavascriptv2.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

jsx-vue-functional

✓ plugins: ['jsx-vue-functional']

✗ import jsxVueFunctional from 'babel-plugin-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.

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> // ) // }

Debug

Known issues

breakingStarting 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).

affects: >=2.0.0

gotchaThis 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.

affects: >=1.0.0

gotchaFunctional 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.

affects: >=2.1.0

Errors

Common errors & fixes

ReferenceError: A is not defined

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 <

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.

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

@vue/babel-plugin-jsxrequiredThis plugin enhances Vue's JSX capabilities; it requires a base Vue JSX Babel plugin to function correctly. The README refers to 'transform-vue-jsx', which is the older name for @vue/babel-plugin-jsx. Both are necessary to parse JSX in Vue context.

@babel/preset-envoptionalTypically used with Babel to transpile modern JavaScript features to a compatible target environment. While not strictly a direct runtime dependency, it's almost always configured alongside for a functional build setup.

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/nickmessing/babel-plugin-jsx-vue-functional ↗

packagehttps://www.npmjs.com/package/babel-plugin-jsx-vue-functional ↗