[Vue3] <script lang="tsx" setup>에서 template return 하는 방법

일반적으로 composition api만을 활용 시에는 아래와 같이 defineComponent에 setup()에 return으로 템플릿을 전달하면 된다.

<script lang="tsx">
import { computed, defineComponent, unref } from 'vue'

export default defineComponent({
  name: 'Layout',
  setup() {
    return () => (
      <section class={[prefixCls, `${prefixCls}__${layout.value}`, 'w-[100%] h-[100%] relative']}>
        {mobile.value && !collapse.value ? (
          <div
            class="absolute top-0 left-0 w-full h-full opacity-30 z-99 bg-[var(--el-color-black)]"
            onClick={handleClickOutside}
          ></div>
        ) : undefined}

        {renderLayout()}

        <Backtop></Backtop>

        <Setting></Setting>
      </section>
    )
  }
})
</script>

하지만 <script setup> 방식에서는 템플릿을 그냥 return할 경우에는 오류가 발생한다.

이때는 setup 방식에서 쓸 수 있는 helper method를 지원하는 플러그인을 활용하면 된다.

https://vue-macros.sxzz.moe/macros/define-render.html

<script setup lang="tsx">
// JSX passed directly
defineRender(
  <div>
    <span>Hello</span>
  </div>
)

// Or using render function
defineRender(() => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
})
</script>

설치하는 법은 위 사이트에 잘 나와있으니 따라하면 된다.

다만 기존에 vite.config.ts에

plugins: [
			Vue(),
			VueJsx(),
			VueMacros(
            	plugins: {
        			vue: Vue(),
       				vueJsx: VueJsx(),
      			},
            ),
            

위와 같이 중복해서 Vue(), VueJsx()를 정의해주면 오류가 발생하니 둘중에 한군데는 빼주면 정상적으로 작동한다.