or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-vue--babel-preset-jsx

Configurable Babel preset that enables JSX syntax support for Vue.js applications

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/@vue/babel-preset-jsx@1.4.x

To install, run

npx @tessl/cli install tessl/npm-vue--babel-preset-jsx@1.4.0

@vue/babel-preset-jsx

@vue/babel-preset-jsx is a configurable Babel preset that enables JSX syntax support for Vue.js applications. It serves as a meta-package that orchestrates multiple specialized Babel plugins to transform JSX syntax into Vue-compatible render functions, supporting advanced Vue.js features including component props, slots, scoped slots, directives (v-model, v-on), functional components, and composition API integration.

Package Information

Package Name: @vue/babel-preset-jsx
Package Type: npm
Language: JavaScript
Installation: npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

Core Imports

// babel.config.js or .babelrc.js
module.exports = {
  presets: ['@vue/babel-preset-jsx']
}

For programmatic use:

const babelPresetJsx = require('@vue/babel-preset-jsx');

Basic Usage

Simple Configuration

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

With Options

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

Composition API Integration

// babel.config.js - Auto-detect Vue version
module.exports = {
  presets: [
    [
      '@vue/babel-preset-jsx',
      {
        compositionAPI: 'auto'
      }
    ]
  ]
}

// For Vue 3
module.exports = {
  presets: [
    [
      '@vue/babel-preset-jsx',
      {
        compositionAPI: 'native'
      }
    ]
  ]
}

Capabilities

Babel Preset Factory Function

The main export that creates a Babel preset configuration with selectable Vue JSX transformation plugins.

/**
 * Creates a Babel preset configuration for Vue JSX transformation
 * @param {Object} babel - The Babel instance (unused but required by Babel preset API)
 * @param {PresetOptions} options - Configuration options for the preset
 * @returns {PresetConfiguration} Babel preset configuration object
 */
function babelPresetJsx(babel, options = {}) {
  // Returns { plugins: Array<Plugin|[Plugin, Options]> }
}

Types

/**
 * Configuration options for the Vue JSX Babel preset
 */
interface PresetOptions {
  /** Enable functional components syntactic sugar (default: true) */
  functional?: boolean;
  
  /** Enable automatic h injection syntactic sugar (default: true) */
  injectH?: boolean;
  
  /** Enable vModel syntactic sugar (default: true) */
  vModel?: boolean;
  
  /** Enable vOn syntactic sugar (default: true) */
  vOn?: boolean;
  
  /** 
   * Enable composition API support (default: false)
   * - false: Disabled
   * - true | 'auto': Auto-detect Vue version for import source
   * - 'native' | 'naruto': Import from 'vue'
   * - 'vue-demi': Import from 'vue-demi'
   * - { importSource: string }: Custom import source
   */
  compositionAPI?: boolean | string | CompositionAPIConfig;
}

/**
 * Custom composition API configuration
 */
interface CompositionAPIConfig {
  /** Custom import source for composition API utilities */
  importSource: string;
}

/**
 * Babel preset configuration returned by the factory function
 */
interface PresetConfiguration {
  /** Array of Babel plugins with their configurations */
  plugins: Array<Plugin | [Plugin, PluginOptions]>;
}

Plugin Orchestration

The preset conditionally includes these plugins based on configuration:

@vue/babel-plugin-transform-vue-jsx - Core JSX transformation (always included)
@vue/babel-sugar-functional-vue - Functional components sugar (when functional: true)
@vue/babel-sugar-inject-h - Automatic h injection (when injectH: true)
@vue/babel-sugar-composition-api-inject-h - Composition API h injection (when compositionAPI enabled)
@vue/babel-sugar-composition-api-render-instance - Composition API render instance (when compositionAPI enabled)
@vue/babel-sugar-v-model - v-model directive sugar (when vModel: true)
@vue/babel-sugar-v-on - v-on directive sugar (when vOn: true)

Configuration Examples

Minimal Configuration

// Only enable core JSX transformation
module.exports = {
  presets: [
    [
      '@vue/babel-preset-jsx',
      {
        functional: false,
        injectH: false,
        vModel: false,
        vOn: false,
        compositionAPI: false
      }
    ]
  ]
}

Vue 3 with Composition API

// Vue 3 with native composition API support
module.exports = {
  presets: [
    [
      '@vue/babel-preset-jsx',
      {
        compositionAPI: 'native'
      }
    ]
  ]
}

Custom Import Source

// Custom composition API import source
module.exports = {
  presets: [
    [
      '@vue/babel-preset-jsx',
      {
        compositionAPI: {
          importSource: 'my-vue-composition-library'
        }
      }
    ]
  ]
}

Vue 2.7 Compatibility

// Automatic detection for Vue 2.7
module.exports = {
  presets: [
    [
      '@vue/babel-preset-jsx',
      {
        compositionAPI: 'auto'
      }
    ]
  ]
}

Error Handling

The preset includes automatic Vue version detection when compositionAPI is set to 'auto' or true. If Vue package cannot be found or read, it falls back to the default @vue/composition-api import source without throwing an error.

// Automatic fallback behavior
try {
  const vueVersion = require('vue/package.json').version;
  if (vueVersion.startsWith('2.7')) {
    importSource = 'vue';
  }
} catch (e) {
  // Falls back to '@vue/composition-api'
}