unplugin-vue-autoRef

More radical reactive tansform macros in Vue powered by Vue Reactivity Transform！

Features

• ✨ More radical reactive tansform macros in Vue.
• 💚 Supports both SFC and JSX out-of-the-box.
• 🦾 Full TypeScript support.
• ⚡️ Supports Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by unplugin.

Installation

npm i unplugin-vue-autoref -D

Vite (first-class support)

// vite.config.ts
import AutoRef from 'unplugin-vue-autoref/vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [AutoRef(), Vue({ reactivityTransform: true })],
})

Rollup (first-class support)

// rollup.config.js
import Vue from 'unplugin-vue/rollup'
import AutoRef from 'unplugin-vue-autoref/rollup'

export default {
  plugins: [AutoRef(), Vue({ reactivityTransform: true })], // must be before Vue plugin!
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [
    require('unplugin-vue-autoref/esbuild')(), // must be before Vue plugin!
    require('unplugin-vue/esbuild')(),
  ],
})

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-autoref/webpack')(), // must be before Vue plugin!
    require('unplugin-vue/webpack')(),
  ],
}

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [require('unplugin-vue-autoref/webpack')()],
  },
}

TypeScript Support

// env.d.ts
/// <reference types="unplugin-vue-autoref/autoref-global" />

Usage

<script setup lang="ts">
let count = ref(0)
const updateCount = (num: number) => {
  count += num
}
</script>

<template>
  <button @click="updateCount(-1)">-</button>
  <h1>{{ count }}</h1>
  <button @click="updateCount(1)">+</button>
</template>

More Documentation