Skip to content

Instantly share code, notes, and snippets.

@chulman444

chulman444/App.vue

Created October 31, 2018 04:06
Show Gist options
  • Save chulman444/4e63d69f0636c1ba47bdfbafeafc42b1 to your computer and use it in GitHub Desktop.
Save chulman444/4e63d69f0636c1ba47bdfbafeafc42b1 to your computer and use it in GitHub Desktop.
Download ZIP
Vue.js. Toggle components.
Raw
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.

Raw
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>
Raw
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>
Raw
components\MyTest.vue
<template>
<div>
My test
</div>
</template>
<script>
export default {
}
</script>
Raw
vue.config.js
// You need to create this file at the project root directory
module.exports = {
runtimeCompiler: true
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment