setupSFC
Stability:
experimental
⚠️ Experimental feature, use at your riskTIP
If you're using setupSFC
, then defineRender
cannot be disabled.
Features | Supported |
---|---|
Vue 3 | ✅ |
Nuxt 3 | ✅ |
Vue 2 | ✅ |
TypeScript / Volar | ✅ |
Setup
ts
// vite.config.ts
import Vue from '@vitejs/plugin-vue'
import VueMacros from 'unplugin-vue-macros/vite'
export default defineConfig({
plugins: [
VueMacros({
plugins: {
vue: Vue({
include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],
// ⬆️ setupSFC pattern need to be added
}),
},
}),
],
})
ts
import VueMacros from 'unplugin-vue-macros/rollup'
import Vue from 'unplugin-vue/rollup'
export default defineConfig({
plugins: [
VueMacros({
plugins: {
vue: Vue({
include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],
// ⬆️ setupSFC pattern need to be added
}),
},
}),
],
})
🚧
🚧
Basic Usage
tsx
// Foo.setup.tsx
defineProps<{
foo: string
}>()
defineEmits<{
(evt: 'change'): void
}>()
export default () => (
<div>
<h1>Hello World</h1>
</div>
)
Volar Configuration
jsonc
{
"vueCompilerOptions": {
"plugins": ["unplugin-vue-macros/volar"],
"vueMacros": {
"setupSFC": true,
},
},
}