A compile macro to make the usage of options api in setup script with ease.
pnpm i vite-plugin-vue-options- Setup plugin in
vite.config.ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import VueOptions from 'vite-plugin-vue-options'
export default defineConfig({
plugins: [Vue(), VueOptions()],
})- Usage in vue SFC
<template>
<div>
foo
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
defineOptions({
name: 'FooBar',
})
const foo = ref('foo')
</script>Using defineOptions fn to set option api in setup script.
The above code will be compiled into:
<script lang="ts">
export default {
name: 'FooBar',
}
</script>
<template>
<div>
foo
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const foo = ref('foo')
</script>- Typescript support (Optional)
{
"types": [
"vite-plugin-vue-options"
]
}Then you can use defineOptions with type emits.
Currently, the plugin only supports the defineOptions function in the setup script, and can not access outer variables.