Skip to content

setupSFC

稳定性: 实验性 ⚠️ 实验性功能,风险自负

TIP

如果你使用的是 setupSFC,则不能禁用 defineRender

特性支持
Vue 3
Nuxt 3
Vue 2
TypeScript / Volar

安装

ts
// vite.config.ts
import VueMacros from 'unplugin-vue-macros/vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue({
          include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],
          //                   ⬆️ 需要添加 setup 模式
        }),
      },
    }),
  ],
})
ts
import Vue from 'unplugin-vue/rollup'
import VueMacros from 'unplugin-vue-macros/rollup'

export default defineConfig({
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue({
          include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],
          //                   ⬆️ 需要添加 setup 模式
        }),
      },
    }),
  ],
})
🚧
🚧

基本用法

tsx
// Foo.setup.tsx
defineProps
<{
foo
: string
}>()
defineEmits
<{
(
evt
: 'change'): void
}>() export default () => ( <
div
>
<
h1
>Hello World</
h1
>
</
div
>
)

已知的问题

  • Source map 在 JSX/TSX 文件中不能正确的映射。
  • TypeScript 支持尚未完成。

贡献者

The avatar of contributor named as renovate[bot] renovate[bot]

页面历史