Vue.js. Toggle components.

README.md

Could EASILY or more like, simply, do this with component tag (refer to this vue documentation) with no new Vue but I wanted to try this with new Vue ... just because.

I thought new Vue({ el: target_el }) would put the Vue component INSIDE the target_el, but it seems to replace. So, when I want to load compA and compB, when I use the target_el to load using new Vue(Object.assign(compA, { el: target_el }) or something, the target_el is gone, so when I want to 'toggle' to compB with new Vue(Object.assign(compB, { el: target_el }), it just doesn't work.

Also about the vue.config.js setting, refer to this Vue issue.

Was getting:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

and things weren't working. Creating the vue.config.js file then adding the runtimeCompiler: true made it work.

App.vue

<template>
    <div id="app">
        <button type="button" v-on:click="onButtonClick">Toggle</button>
        <div ref="comp-container" class="comp-container">
            <div ref="container" class="container">

            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import HelloWorld from './components/HelloWorld.vue'
import MyTest from './components/MyTest.vue'

export default {
    name: 'app',
    data() {
        return {
            toggleable: null,
        }
    },
    mounted() {
        let target_el = this.$refs["container"]
        let vm = new Vue({
            el: target_el,
            template: `<component v-bind:is="cur_comp"></component>`,
            data: {
                cur_comp: "hello-world"
            },
            components: {
                HelloWorld, MyTest
            },
            methods: {
                toggle() {
                    if(this.cur_comp == "hello-world") {
                        this.cur_comp = "my-test";
                    }
                    else {
                        this.cur_comp = "hello-world";
                    }
                }
            }
        })
        this.toggleable = vm;
        console.log(vm.$el); // <div data-v-blah class='hello'>...</div>
    },
    methods: {
        onButtonClick() {
            this.toggleable.toggle();
        }
    }
}
</script>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

components\HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

components\MyTest.vue

<template>
<div>
    My test
</div>
</template>

<script>
export default {
    
}
</script>

vue.config.js

// You need to create this file at the project root directory
module.exports = {
    runtimeCompiler: true
}