I am currently developing a GUI for a webgame using Vue.JS and opting to use http-vue-loader instead of Webpack or similar tools. Personally, I find them cumbersome and prefer to avoid using them.
Typically, in order to integrate my components into the DOM, I follow these steps:
GUI.js
// Creating Vue.js instance for GUI
Pixua.GUI = new Vue({
el: '#GUI',
components: {
'Debug': httpVueLoader('./gui/windows/Debug.vue')
},
data: {
row: 0,
column: 0
}
});
Index.html
<div id="GUI">
<windows id="windows">
<debug v-bind:row="row" v-bind:column="column" ></debug>
</windows>
</div>
Debug.vue (my component)
<template>
<px-window title="Debug" :width="200" :is-open.sync="isOpen">
Clicked Box:
<ul>
<li>Row: {{row}}</li>
<li>Column: {{column}}</li>
</ul>
</px-window>
</template>
<script>
module.exports = {
props: ['row','column'],
data: function() {
return {
isOpen: true
}
}
}
</script>
<style>
</style>
My query is whether it is feasible to dynamically mount/render the component into the DOM using JS (via GUI.js) without explicitly specifying it in the index.html file (so without
<debug v-bind:row="row" v-bind:column="column" ></debug>