{"id":10540,"library":"babel-plugin-jsx-vue-functional","title":"Babel Plugin for Vue Functional JSX","description":"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.","status":"active","version":"2.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/nickmessing/babel-plugin-jsx-vue-functional","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-jsx-vue-functional","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-jsx-vue-functional","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-jsx-vue-functional","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This 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.","package":"@vue/babel-plugin-jsx","optional":false},{"reason":"Typically 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.","package":"@babel/preset-env","optional":true}],"imports":[{"note":"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.","wrong":"import jsxVueFunctional from 'babel-plugin-jsx-vue-functional'","symbol":"jsx-vue-functional","correct":"plugins: ['jsx-vue-functional']"},{"note":"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.","symbol":"Configuration","correct":"{\n \"plugins\": [\n \"jsx-vue-functional\",\n \"@vue/babel-plugin-jsx\" \n ]\n}"}],"quickstart":{"code":"{\n // .babelrc or babel.config.js\n \"presets\": [\n [\"@babel/preset-env\", { \"targets\": { \"node\": \"current\" } }]\n ],\n \"plugins\": [\n \"jsx-vue-functional\",\n \"@vue/babel-plugin-jsx\"\n ]\n}\n\n// src/components/MyFunctionalComponent.js\n// Example of a functional component using JSX syntactic sugar\nconst GreetUser = ({ props }) =>
\n// )\n// }","lang":"javascript","description":"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."},"warnings":[{"fix":"If a named arrow function contains JSX, use it as a component tag (e.g., ``) 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).","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"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`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"No fix needed; this is an enhancement for developer experience and only affects development builds.","message":"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.","severity":"gotcha","affected_versions":">=2.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Treat the function as a component and use it as a JSX tag (e.g., ``) instead of calling it as a function. This applies since version 2.0.0.","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.","error":"ReferenceError: A is not defined"},{"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.","cause":"Babel is encountering JSX syntax but the necessary JSX transformation plugins are not correctly configured or ordered.","error":"Syntax Error: Unexpected token <"}],"ecosystem":"npm"}