README
unplugin-vue-define-options
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.
Features
- ✨ With this marco, you can use Options API in
script-setup
. - ⚡️ Supports Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by unplugin.
Discussion
Example
Basic example
<script setup lang="ts">
import { useSlots } from 'vue'
defineOptions({
name: 'Foo',
inheritAttrs: false,
props: {
msg: { type: String, required: false },
},
emits: ['change', 'update'],
})
const slots = useSlots()
</script>
Output
<script lang="ts">
export default {
name: 'Foo',
inheritAttrs: false,
props: {
msg: { type: String, required: false },
},
emits: ['change', 'update'],
}
</script>
<script setup>
const slots = useSlots()
</script>
script-setup
JSX in <script setup lang="tsx">
defineOptions({
render() {
return <h1>Hello World</h1>
},
})
</script>
Output
<script lang="tsx">
export default {
render() {
return <h1>Hello World</h1>
},
}
</script>
Installation
npm i unplugin-vue-define-options -D
Vite
// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [Vue(), DefineOptions()],
})
Rollup
// rollup.config.js
import DefineOptions from 'unplugin-vue-define-options/rollup'
export default {
plugins: [DefineOptions()], // Must be before Vue plugin!
}
esbuild
// esbuild.config.js
import { build } from 'esbuild'
build({
plugins: [
require('unplugin-vue-define-options/esbuild')(), // Must be before Vue plugin!
],
})
Webpack
// webpack.config.js
module.exports = {
/* ... */
plugins: [require('unplugin-vue-define-options/webpack')()],
}
Vue CLI
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [require('unplugin-vue-define-options/webpack')()],
},
}