Vue Macros

English

简体中文

English

简体中文

Appearance

On this page

setupSFC ​

Stability: experimental ⚠️ Experimental feature, use at your risk

TIP

If you're using setupSFC, then defineRender cannot be disabled.

FeaturesSupported
Vue 3✅
Nuxt 3✅
Vue 2✅
TypeScript / Volar❌

Setup ​

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

export default defineConfig({
  plugins: [
    VueMacros(),
    Vue({
      include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],
      //                   ⬆️ setupSFC pattern need to be added
    }),
  ],
})
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?$/],
          //                   ⬆️ 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>
)

Known Issues ​

  • The source map does not correspond properly in JSX/TSX files.
  • TypeScript support is not yet completed.