Skip to content

jsxRef NPM Version

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

Automatically infer type for useRef.

FeaturesSupported
Volar

Setup Auto Import

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

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

Basic Usage

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>
ts
import { defineComponent } from 'vue'

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

Volar Configuration

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

Contributors

Changelog