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

• Related issue
• RFC

Example

Basic example

<script setup lang="ts">
import { useSlots } from 'vue'
defineOptions({
  name: 'Foo',
  inheritAttrs: false,
  props: {
    msg: { type: String, default: 'bar' },
  },
  emits: ['change', 'update'],
})
const slots = useSlots()
</script>

Output

<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>

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')()],
  },
}