I'm working with a very simple Vue 3 app, listed below.
This works like a charm when including Vue as a script, see code snippet.
I need to use it with webpack however, and therefore include it as an npm package. In this case the app loads, but Vue empties everything inside the div it's mounted on. See CodeSandbox example
I've tried different ways to export and import the App object, but none work. What am I overlooking?
const {ref} = Vue;
const App = {
setup() {
const count = ref(0);
const inc = () => {
count.value++;
};
return {count, inc};
}
}
Vue.createApp(App).mount('#simple-example')<head>
<script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script>
</head>
<body>
<div id="simple-example">
<h1>Hello Vue 3!</h1>
<button @click="inc">Clicked {{ count }} times.</button>
</div>
</body>Changing this:
import { createApp } from "vue";
into this:
import { createApp } from "vue/dist/vue.esm-bundler";
fixed the problem. Thanks to Estus Flask
UPDATE
The fix can be further improved by creating an alias for vue in the webpack config file:
resolve: {
alias: {
vue: "vue/dist/vue.esm-bundler.js"
}
}
That will make it possible to use "vue" again in the import statement, which then points to the vue.esm-bundler.js instead of the default vue.runtime.es.js.