I have a straightforward Vue 3 application that is working perfectly fine when I include Vue as a script, as shown in the code snippet below.
However, I need to integrate it with webpack by including it as an npm package. When I do this, the app loads but Vue seems to empty everything inside the div it's mounted on. You can see the issue in this CodeSandbox example.
I've tried various methods for exporting and importing the App object, but nothing seems to work. What am I missing?
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@next/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>