I tried to configure vhtml in vite's vanilla javascript template but I'm unable to implement it. Please guide me on how to configure it.
main.js
------
/** @jsx vhtml */
import { Counter } from "./src/counter";
document.body.innerHTML = (
<main>
<Counter/>
</main>
);/** @jsx vhtml */
export function Counter() {
let count = 0;
return (
<section>
<h1>Click button</h1>
<button onClick={() => count++}>Click me</button>
</section>
);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./main.jsx"></script>
</body>
</html>
I tried to configure vhtml in vite's vanilla javascript template but I'm unable to implement it. Please guide me on how to configure it.