Using VueJS for components in existing page won't mount

I’m trying to use VueJS to build some reusable web components that I can manually add into a page.

I tried to get some boilerplate projects and there are so many variations using Typescript, Babel, Vite, Rollup, Webpack, using createApp with .vue and with .ts but none show quite what I want. Most projects use VueJS to control the whole UI.

I tried to use the following to replace the contents of a div with the VueJS component:

const div = document.createElement("div");
const elem = createApp({
	template: `
		<div>
		<h1>Single-file JavaScript Component</h1>
		<p>{{ message }}</p>
		</div>
	`,
	data() {
		return {
			message: 'Typescript component'
		}
	}
}).mount(div);

document.body.appendChild(div);

The above runs the mount ok and it gets applied to the div (the div gets a vnode attribute) but it fills the innerHTML with an HTML comment instead of the template.

Is there an example on how to use VueJS to build components for using in an existing page?

I’m currently using esm-bundler in the browser after replacing the process.env.NODE_ENV in rollup but I’ve read that esm-browser should be used. The esm-bundler script gets exported by default. Is there a config value to switch to exporting esm-browser?

The above example also uses Typescript to define the component but most examples use .vue files. What is the best way to build/package .vue files? Using Typescript compiles very quickly. When I try using vue-cli-service, it takes much longer to compile and it produces chunk/index/html files - how would I bundle these into a single file?

Is there a good site with boilerplate examples for different ways to use VueJS?

I managed to find an example repo that was close to what I wanted at the following link, I just had to convert this to Typescript by adding the dts output and some other small changes:

That repo uses Vite to bundle Vue components into a library that can be used in other projects.

Boilerplate projects are really useful for getting setup with VueJS. It would be good if there was an official repo with examples of the most recommended ways to use VueJS to get up and running more quickly.

I guess that’s what create-vue is for but I started with this and it setup a project designed to be standalone and I couldn’t see how to change it into a reusable component library.