# vuejs/jsx-vue2

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/vuejs-jsx-vue2).**

_How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._

1,478 stars · 93 forks · JavaScript

## Links

- GitHub: https://github.com/vuejs/jsx-vue2
- Homepage: https://jsx-vue2-playground.netlify.app/
- awesome-repositories: https://awesome-repositories.com/repository/vuejs-jsx-vue2.md

## Description

This project is a Babel plugin that enables the use of JSX syntax within Vue 2 applications. It functions as a build-time transpilation tool, converting declarative JSX into standard JavaScript render functions that are compatible with the framework's component system.

The plugin bridges the gap between JSX and the framework by mapping standard template directives, such as event handling and model binding, directly to JSX attributes. It also provides automatic injection of the component instance context, allowing developers to access reactive properties and lifecycle methods directly within their render functions.

Beyond basic syntax transformation, the tool supports advanced component patterns including named and scoped slots for content projection and the creation of lightweight, stateless functional components. It also integrates with composition-based logic, ensuring that developers can maintain reusable and modular code structures while utilizing JSX for interface construction.

## Tags

### User Interface & Experience

- [JSX Syntax Support](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/rendering-models/jsx-syntax-extensions/jsx-syntax-support.md) — Provides a Babel plugin that converts JSX syntax into standard JavaScript render functions for declarative user interface construction.
- [Scoped Slots](https://awesome-repositories.com/f/user-interface-experience/component-slot-systems/scoped-slots.md) — Supports named and scoped slot patterns to pass content and data-driven templates into child components. ([source](https://github.com/vuejs/jsx-vue2/blob/dev/README.md))
- [Attribute Binding Directives](https://awesome-repositories.com/f/user-interface-experience/data-binding/attribute-binding-directives.md) — Maps standard template directives like model binding and event handling into JSX attributes for familiar interaction patterns. ([source](https://github.com/vuejs/jsx-vue2/tree/dev/packages))
- [Functional Components](https://awesome-repositories.com/f/user-interface-experience/functional-components.md) — Creates lightweight, stateless functional components from arrow functions to optimize rendering performance. ([source](https://github.com/vuejs/jsx-vue2/blob/dev/README.md))
- [JSX Rendering Components](https://awesome-repositories.com/f/user-interface-experience/jsx-rendering-components.md) — Transforms JSX syntax into valid JavaScript code to allow declarative UI construction within component files. ([source](https://github.com/vuejs/jsx-vue2#readme))
- [Slot-Based Content Projection](https://awesome-repositories.com/f/user-interface-experience/slot-based-content-projection.md) — Enables flexible content composition and data passing by mapping named and scoped slot patterns within JSX.
- [Render Context Injections](https://awesome-repositories.com/f/user-interface-experience/view-hierarchy-injections/state-based-view-injection/activity-context-injections/view-context-injections/render-context-injections.md) — Provides seamless access to reactive properties and lifecycle methods by injecting the component instance context into render functions.

### Programming Languages & Runtimes

- [Babel Transformations](https://awesome-repositories.com/f/programming-languages-runtimes/multi-pass-compiler-pipelines/babel-transformations.md) — Integrates Babel into the build pipeline to transpile JSX syntax into standard JavaScript render functions.
- [JavaScript Transpilers](https://awesome-repositories.com/f/programming-languages-runtimes/javascript-transpilers.md) — Provides a build-time utility that transforms modern JSX syntax into compatible JavaScript code.

### Web Development

- [JSX Transformers](https://awesome-repositories.com/f/web-development/jsx-transformers.md) — Converts JSX syntax into standard JavaScript render functions to enable declarative UI construction. ([source](https://github.com/vuejs/jsx-vue2/tree/dev/packages))
- [Attribute-Based Directives](https://awesome-repositories.com/f/web-development/attribute-based-directives.md) — Translates template-based directives into JSX attributes to maintain familiar interaction patterns within the component system.
- [Attribute Binding](https://awesome-repositories.com/f/web-development/attribute-binding.md) — Applies static values, dynamic expressions, and object spreads to component elements during the rendering process. ([source](https://github.com/vuejs/jsx-vue2/blob/dev/README.md))
- [Component Composition](https://awesome-repositories.com/f/web-development/component-composition.md) — Integrates composition-based logic and helper functions directly into render functions to maintain clean and reusable component code.
- [Functional Components](https://awesome-repositories.com/f/web-development/functional-components.md) — Optimizes rendering performance by creating lightweight, stateless functional components using arrow functions.
- [JavaScript View Rendering](https://awesome-repositories.com/f/web-development/javascript-view-rendering.md) — Transforms JSX syntax into standard JavaScript render functions compatible with the component system.
- [Reactive Bindings](https://awesome-repositories.com/f/web-development/template-data-binding/reactive-binding-updates/reactive-template-compilers/reactive-bindings.md) — Maps framework directives and reactive data expressions to JSX attributes for seamless state management.

### Software Engineering & Architecture

- [Stateless Functional Components](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/design-patterns/functional-design-patterns/stateless-functional-components.md) — Optimizes rendering performance by hoisting arrow functions into lightweight, stateless functional components.