Почему Vue.mount не показывает загруженный компонент?

Question

[Ben L]

Пробую использовать Vue3 не через vue create, а компилировать через rollup. Проблема в том что компонент не загружается, тоесть шаблон удаляется после загрузки js. В интернете не могу ничего найти, практически все делают через vue create.
Мой код:
index.html

...
<div id="app"><p>{{ message }}</p></div>
<script type="text/javascript" src="bundle.js"></script>
...

main.js

import { createApp } from 'vue';
const HelloWorlld = {
	data() {
		return {
			message: 'Hello Vue!'
		}
	}
};
createApp(HelloWorlld).mount('#app');

rollup.config.js

import nodeResolve from 'rollup-plugin-node-resolve';
import replace from 'rollup-plugin-replace';

export default {
	input: 'main.js',
	plugins: [
		replace({ "process.env.NODE_ENV": "'production'" }),
		nodeResolve({})
	],
	output: {
		file: 'bundle.js',
		format: 'iife',
	},
};

После загрузки javascript содержимое тэга #app это пустой html коментарий.

...
<div id="app" data-v-app=""><!----></div>
<script type="text/javascript" src="bundle.js"></script>
...

Помогите помочь разобратся с этой проблемой.

Answer 1

[Ben L]

Нашол в чем проблема.
Vue3 по умолчанию идет без модуля отвечающии за обработку шаблонов в runtime, а это значит что мне нужно "компилтровать" шаблоны в момент сборки.
Для rollup-а есть плагин rollup-plugin-vue, для webpack-а есть vue-loader. Еще можно использовать vue-cli чтобы "компилировать" отдельные vue компоненты.

Второе решение, это использовать Vue c модулем для шаблонов. Это можно сделать так:

import Vue from 'node_modules/vue/dist/vue.esm-bundler';