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

ViteRollup🚧 esbuild🚧 Webpack

// vite.config.ts import Vue from '@vitejs/plugin-vue' import VueMacros from 'vue-macros/vite'  export default defineConfig({  plugins: [  VueMacros({  plugins: {  vue: Vue({  include: [/\.vue$/, /\.setup\.[cm]?[jt]sx?$/],  // ⬆️ setupSFC pattern need to be added  }),  },  }),  ], })

import Vue from 'unplugin-vue/rollup' import VueMacros from '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
> )

Volar Configuration

tsconfig.json

jsonc

{  "vueCompilerOptions": {  "plugins": ["vue-macros/volar"],  "vueMacros": {  "setupSFC": true,  },  }, }

Contributors

Young

Changelog

Last edited 8 months ago

View full history

setupSFC ​

Setup ​

Basic Usage ​

Volar Configuration ​