Приложения на Vue

Подготовка HTML-разметки index.tsx:

import { jsx } from '@app/html-jsx'
import VueComponent from './VueComponent.vue'

app.html('/', async ctx => {
  return (
    <html>
      <head></head>
      <body>
        <VueComponent title="Привет мир!" />
      </body>
    </html>
  )
})

Реализация самого компонента VueComponent.vue:

<script setup lang="ts">
defineProps<{
  title: string
}>()
</script>

<template>
  <div>Компонент на Vue</div>
  <div>Переданный заголовок: {{ title }}</div>
</template>

На что обратить внимание:

В разметке HTML должен быть тег head. В нем отрендерятся все необходимые зависимости для работы с Vue. Если тег head отсутствует, компонент Vue работать не будет.
Компоненты Vue имеют расширение файла *.vue.

Посмотрите подробную документацию по библиотеке, чтобы больше узнать о Vue.

Документация

Приложения на Vue