How can I use new <script setup> syntax in Vue SFC without template section?

Viewed 1876

When I try to write SFC with <script setup> but without <template>, I get a warning in console [Vue warn] Component is missing template or render function.

Is there any workaround?

2 Answers

Obviously, you need a Template or render function. Since you don't want to use template, You can consider using render function.

Unfortunately, the render function doesn't seem to work with setup.

<script lang="ts">
export default defineComponent({
  render() {
    return h("div", {}, this.a);
  }
});
</script>

<script lang="ts" setup>
import { defineComponent, ref, h } from "vue";

const a = ref(1);
</script>

<style scoped></style>

For more, you can see render-function(official doc) here.

Vuejs dev answers, that one can use empty <template> in this case.

Related