vue cli plugin to support tsx in vue.

Overview

vue-cli-plugin-tsx

Write vue in TSX, powered by babel-plugin-macros, vue-tsx.macro and babel-plugin-transform-vue-jsx-spread-attributes. And no runtime helpers are injected, except for merging attributes in JSX.

EXAMPLE: see samples folder.

NOTICE: This package only works for vue 2 and projects created by vue-cli.

NOTICE: This package isn't campatible with @vue/cli-plugin-typescript.

NOTICE: <template /> isn't available, please use scopedSlots attribute.

NOTICE: DON'T use variable h in context where JSX used, because Vue use it to be as $createElement alias.

NOTICE: All intrinsic elements (e.g., div, fe-merge) should be used in kebab case.

NOTICE: All Vue builtin components (transition, transition-group and keep-alive) should also be used in kebab case.

NOTICE: The followed names / prefixes are reserved, if you use them, something will go wrong.

  • staticClass
  • class
  • style
  • key
  • ref
  • refInFor
  • slot
  • scopedSlots
  • model
  • domProps (prop and prefixed prop)
  • on (prop and prefixed prop)
  • nativeOn (prop and prefixed prop)
  • hook (prop and prefixed prop)
  • attrs (prop and prefixed prop)

However, you can use them as attributes in JSX to pass related data.

NOTICE: All attributes not prefixed / or equal to the above are picked as normal attributes (move to attrs field in VNode's options), except that it's prefixed by $.

Install

npm install -D vue-cli-plugin-tsx

or

yarn add -D vue-cli-plugin-tsx

Example

import LogoAsset from '@/assets/logo.png'
import { component, functional, type as t, EVENTS, SCOPED_SLOTS } from 'vue-tsx.macro'
import HelloWorld from '@/components/HelloWorld.vue'
import { VNode } from 'vue'

// It will transform to Vue object with no runtime helper:
// const Component = { props: {...}, render: function () { ... } }
const Component = component({
  props: {
    // optional prop with type string | undefined.
    propWithVuePropType: String,
    // required prop with type number
    propWithVuePropDef: {
      type: Number,
      // If prop contains required filed, no matter of its value (true of false),
      // this prop will be required.
      // Because in most cases, we only set required when it's true.
      required: true,
    },
    // optional prop with type { a: number; b?: string } | undefined
    propWithTSType: t<{ a: number; b?: string }>(),
    // required prop
    propWithRequiredTSType: {
      type: t<number[]>(),
      required: true,
    },
  },

  // Declare component's events with their payload types.
  // This field will be removed by macro.
  [EVENTS]: {
    eventWithStringPayload: String,
    eventWithTSPayload: t<{ count: number }>(),
  },

  // Declare component's scoped slots' scope (param) types.
  [SCOPED_SLOTS]: {
    default: {
      scope: Number,
      required: true,
    }
  },

  render() {
    return (
      <div>
        {this.propWithTSType ? this.propWithTSType.a : undefined}
        <HelloWorld />
        {this.$scopedSlots.default(this.propWithVuePropDef)}
      </div>
    )
  },
})

// We needn't to declare the first createElement argument,
// macro and jsx will do this for you.
const Home = functional(context_ => {
  const attrs = {
    // names that not Vue's VNode options key name will
    // move to attrs property. And Vue will pick them to
    // props if defined in Component's props field.
    propWithRequiredTSType: [1, 2],
    propWithVuePropDef: 123,

    // We can pass scoped slots to children to generate VNodes.
    scopedSlots: {
      default: props => [<hr />]
    },

    // Due to TS' restriction, we cannot derive key named 'onEventWithStringPayload',
    // so we cannot pass event listener as attribute for custom component, and we should
    // pass them in `on` attribute.
    on: {
      eventWithStringPayload: payload => console.log(payload)
    }
  }

  // Because Vue supports function child only if it's the only child.
  // It means if we only declare scoped slots with only one default one,
  // the component can accept a function.

  // However, because Intrinsic Elements' listener names are known,
  // you can use such as `onMouseUp={...}` on Intrinsic Elements, e.g.,
  // div, span, and so on.
  return (
    <div
      class='home'
      onMouseDown={event => console.log(event.pageX)}
      on={{
        click: event => {
          console.log(event.target)
        },
      }}>
      <img alt='123' src={LogoAsset} />
      <Component propWithRequiredTSType={[1, 2]} propWithVuePropDef={123}>
        {() => <hr />}
      </Component>

      <Component {...attrs}  />
    </div>
  )
})

export default Home
You might also like...
Vue CLI plugin that provides auto routing feature for multi pages

vue-cli-plugin-macula-auto-routing Vue CLI plugin that provides auto routing feature for multi pages(forked from ktsn/vue-cli-plugin-auto-routing). Ov

Vue-cli 3 plugin to build an SVG sprite using svg-sprite-loader

vue-cli-plugin-svg-sprite vue-cli 3 plugin to build an SVG sprite using svg-sprite-loader. Install vue add svg-sprite Usage Use the SvgIcon component

Monorepo Shared Code between NativeScript + Vue Vite + Vue CLI

Monorepo Shared Code between NativeScript + Vue Vite + Vue CLI

Project using Vue CLI for improved development setup and exploring .vue files containing template, script, and style tags

Sample-Project-using-Vue-CLI-and-Intro-to-.Vue-Files Project using Vue CLI for improved development setup and exploring .vue files containing template

Quickly build an enterprise application with vue-cli and element-ui in seconds.
Quickly build an enterprise application with vue-cli and element-ui in seconds.

vue-cli-plugin-element Quickly build an enterprise application with vue-cli and element-ui in seconds. This project is not only a vue-cli plugin but a

Use Vite Today, with vue-cli
Use Vite Today, with vue-cli

Use Vite Today out-of-box for vue-cli projects without any codebase modifications. Table of Contents Usage Motivation Options Underlying principle Com

A CLI for generating component- and module templates in Vue.js.

vuejs-generate A CLI for generating component- and module templates in Vue.js. List of content Install Usage Generating Vue components Generating a Vu

a solution for installing vue-cli custom templates hosted on private/enterprise repositories

vue-cli-template-registry a solution for installing vue-cli custom templates hosted on private/enterprise repositories overview this is a command-line

development server for building vue-cli custom templates
development server for building vue-cli custom templates

vue-cli-template-dev-server development server for building vue-cli custom templates overview this package provides a simple, file-watching server to

Owner
terencez
terencez
A Vue CLI plugin for trying out vue-next (experimental)

vue-cli-plugin-vue-next A Vue CLI plugin for trying out the Vue 3 beta. This is for preview purposes only. There might be bugs and undocumented behavi

vuejs 340 Dec 19, 2022
Vue Cli 3 Cordova Plugin

vue-cli-plugin-cordova Vue CLI 3.x plugin for Apache Cordova. Integrate Cordova into Vue Cli App How To Create Vue App $ npm install -g @vue/cli $ vue

null 410 Dec 24, 2022
🛠️ vue-cli 3 plugin to create component

vue-cli-plugin-component component plugin for vue-cli project │ README.md │ LICENSE (optional) └───src │ ├── index.js │ └───components │

David Desmaisons 88 Jul 27, 2022
vue-cli plugin that adds minimal docker deployment using nginx

vue-cli-plugin-docker-nginx having a node container running an express server seemed kind of overkill for serving a built vue-app This is a vue-cli-pl

Sebastian Boolean 11 Mar 5, 2022
CodeceptJS plugin for Vue CLI

vue-cli-plugin-e2e-codeceptjs Hey, how about some end 2 end testing for your Vue apps? ?? Let's do it together! Vue, me, CodeceptJS & Puppeteer. ?? Br

CodeceptJS 14 Oct 20, 2022
A Vue CLI 3/4 Plugin for Capacitor

Vue CLI Plugin Capacitor Turn your Vue SPA into an Android or iOS app with Capacitor Install Open a terminal in the directory of a Vue CLI 3/4 project

Capacitor Community 136 Dec 31, 2022
A vue-cli plugin that automatically sets aliases

vue-cli-plugin-auto-alias A vue-cli plugin that automatically sets aliases. According to the rootDirName and then auto generated directory alias Engli

GuangHui 3 Aug 26, 2020
Create Modular Vuex stores for Vue CLI 3 plugin

vue-cli-plugin-modular-vuex Create Modular Vuex stores for [email protected] Install If you haven't yet installed vue-cli 3, first follow the install instru

Pure Constructs 6 Aug 29, 2022
Vue CLI 3.x plugin. Quickly build basic development templates.

Vue CLI 3.x plugin. Quickly build basic development templates.

Yimian Data 7 Nov 29, 2021
A Vue CLI Plugin to generate: components, views, routes and more

Vue CLI Plugin Generator is a Vue ClI plugin to generate (.vue)files in your project. For Example for scaffolding Vue Component files. The Plugin uses the buildin plugin generator of Vue CLI.

Eric Fennis 7 Jul 12, 2021