Render a vue template completely on a server route (and get the string from it)

// server/api/sendEmail.ts
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
import template from './template.vue'

export default defineEventHandler(async event => {
    const app = createSSRApp({
        data: () => ({ count: 1 }),
        template: template,
    })

    const str = await renderToString(app)

        // now send the email with the `str` as html body.

    return {
        htmlString: str,
    }
})

// server/utils/template.vue

<template>
    <div class="test" :class="{ 'dynamic': true }">
        {{ props.count }}
    </div>
</template>

<script setup lang="ts">
    const props = defineProps<{ count: number }>()
</script>

 ERROR  RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)


1: <template>
   ^
2:   <div class="test" :class="{ 'dynamic': true }">
3:     {{ props.count }}