setupSFC

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

TIP

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

Features	Supported
Vue 3	✅
Nuxt 3	✅
Vue 2	✅
TypeScript / Volar	✅

Setup

Vite

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

Rollup

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

🚧 esbuild

🚧

🚧 Webpack

🚧

Basic Usage

// Foo.setup.tsx
defineProps<{
  foo: string
}>()

defineEmits<{
  (evt: 'change'): void
}>()

export default () => (
  <div>
    <h1>Hello World</h1>
  </div>
)

Volar Configuration

// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/setup-sfc",
      // ...more feature
    ],
  },
}

Contributors

Kevin Deng

Changelog

Last edited about 11 hours ago

View full history

4e2cca7-refactor: remove dev condition from exports