Vue Applications

Preparation of the HTML markup in index.tsx:

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

app.html('/', async ctx => {
  return (
    <html>
      <head></head>
      <body>
        <VueComponent title="Hello World!" />
      </body>
    </html>
  )
})

Implementation of the component itself in VueComponent.vue:

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

<template>
  <div>Vue Component</div>
  <div>Passed title: {{ title }}</div>
</template>

Points to note:

The HTML markup must include a head tag. All necessary dependencies for working with Vue will be rendered within it. If the head tag is missing, the Vue component will not function.
Vue components have the file extension *.vue.

Check out the detailed documentation for the library to learn more about Vue.