Extend macros and syntax sugar in Vue
unplugin-vue-macros
English | 简体中文
Extend macros and syntax sugar in Vue.
Features
- ✨ Extend macros and syntax sugar in Vue.
- ? Supports both Vue 2 and Vue 3 out-of-the-box.
- ? Full TypeScript support.
- ⚡️ Supports Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by unplugin.
Installation
npm i unplugin-vue-macros -D
// vite.config.ts
import VueMarcos from 'unplugin-vue-macros/vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [Vue(), VueMarcos()],
})
Rollup
// rollup.config.js
import VueMarcos from 'unplugin-vue-macros/rollup'
export default {
plugins: [VueMarcos()], // Must be before Vue plugin!
}
esbuild
// esbuild.config.js
import { build } from 'esbuild'
build({
plugins: [
require('unplugin-vue-macros/esbuild')(), // Must be before Vue plugin!
],
})
Webpack
// webpack.config.js
module.exports = {
/* ... */
plugins: [require('unplugin-vue-macros/webpack')()],
}
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [require('unplugin-vue-macros/webpack')()],
},
}
Usage
defineOptions
Introduce a macro in <script setup>, defineOptions,
to use Options API in <script setup>, specifically to be able to set name, props, emits and render in one function.
Note: if you only need
defineOptions, the standalone version is better for you.
Basic Usage
<script setup lang="ts">
import { useSlots } from 'vue'
defineOptions({
name: 'Foo',
inheritAttrs: false,
})
const slots = useSlots()
</script>
<script lang="ts">
export default {
name: 'Foo',
inheritAttrs: false,
props: {
msg: { type: String, default: 'bar' },
},
emits: ['change', 'update'],
}
</script>
<script setup>
const slots = useSlots()
</script>
JSX in <script setup>
<script setup lang="tsx">
defineOptions({
render() {
return <h1>Hello World</h1>
},
})
</script>
<script lang="tsx">
export default {
render() {
return <h1>Hello World</h1>
},
}
</script>
defineModel
Introduce a macro in <script setup>, defineModel.
To be able define and change v-model props as the same as normal variable.
Warning: Reactivity Transform is required. You should enable it first. Otherwise, it will lose the reactivity connection.
Basic Usage
<script setup lang="ts">
let { modelValue } = defineModel<{
modelValue: string
}>()
console.log(modelValue)
modelValue = 'newValue'
</script>
Output
<script setup lang="ts">
const { modelValue } = defineProps<{
modelValue: string
}>()
const emit = defineEmits<{
(evt: 'update:modelValue', value: string): void
}>()
console.log(modelValue)
console.log(emit('update:modelValue', 'newValue'))
</script>
TypeScript Support
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["unplugin-vue-macros" /* ... */]
}
}
