jsxRef

Stability: experimental ⚠️ Experimental feature, use at your risk

Automatically infer type for useRef.

Features	Supported
Volar	✅

Setup Auto Import

vite.config.ts

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        {
          from: 'vue',
          imports: [['shallowRef', 'useRef']],
        },
      ],
    }),
  ],
})

nuxt.config.ts

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: 'vue',
        imports: [['shallowRef', 'useRef']],
      },
    ],
  },
})

Basic Usage

App.vue

<script lang="tsx">
import { useRef } from 'unplugin-vue-macros/runtime'
// Or import { shallowRef as useRef } from 'vue'
import { Comp } from './Comp.ts'

export default defineComponent(() => {
  const comp = useRef()
  comp.value?.foo

  return () => (
    <>
      <Comp ref={comp} />
    </>
  )
})
</script>

Comp.ts

import { defineComponent } from 'vue'

export const Comp = defineComponent({
  setup() {
    return { foo: 1 }
  },
})

Volar Configuration

tsconfig.json

{
  "vueCompilerOptions": {
    "plugins": ["unplugin-vue-macros/volar"],
    "vueMacros": {
      "jsxRef": {
        "alias": ["useRef"],
      },
    },
  },
}

Contributors

zhiyuanzmj

Changelog

Last edited 3 months ago

View full history

8ed5494-docs: add jsx-ref (#830)