I have this Filter code in which @vueforms/multiselect
component is used:
Filter.vue
<template>
<div id="testm"></div>
</template>
<script lang="ts">
import {createApp} from 'vue';
import Multiselect from '@vueform/multiselect';
export default {
name: 'DataFilter',
async mounted() {
let parent = document.getElementById("testm") as HTMLDivElement;
const app = createApp({
data() {
return {
};
},
methods: {
},
template: `
<Multiselect
/>`,
components: {
Multiselect
}
});
// if (app._container) {
// app.unmount();
// }
try {
app.mount(parent);
alert("mounted")
} catch (error) {
console.error('Error mounting app:', error);
}
},
}
</script>
Everything works with npm run dev
while doing development.
But when I create a build using npm run build
and deploy the dist
folder. The component is not rendering at all like it’s not even there. The alerts and everything works fine.
The above is just a sample preview (skeleton) to explain of the Filter.vue
some syntax errors might be there. Please ignore them.
If I add the component itself in the <template>
like:
<template>
<Multiselect />
</template>
Then the component is rendered properly after build. I have spent many days on this issue, but not able to find solution (which works for me) regarding it.
Can you please tell what am I missing or how to fix this?