How to clone vue instance to another dom node

Question

How can i clone a vue application to another dom node?

I have made a simple vue app to work out my problem, i tried cloning using js clone function and re-initializing the application, it will mount but it wont workout the events. Here's my code:

const initMyApp = (el) => {
    return new Vue({
        el,
        data: {
            message: 'HEY'
        },
        methods: {
            sayHello: function () {
                this.message = 'HELLO!!!' + new Date().getMilliseconds()
            }
        },
        mounted: function () {
            console.log('mounted')
        }
    })
}

initMyApp('#app')

function moveApp() {

    var appNode = document.getElementById("app")
    var cloned = appNode.cloneNode(true);

    document.getElementById("appContainer").innerHTML = ''

    document.getElementById("appContainer").appendChild(cloned);
    initMyApp('#appContainer')
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
        <h2>Main</h2>
        <button @click="sayHello">Hello</button>
        <p>{{message}}</p>
    </div>
    <button onclick="moveApp()">DO</button>
    <div>
        <h2>Container</h2>
        <div id="appContainer">
        </div>

</div>

Any suggestion is really appreciated

What about moving the common data to vuex and just instantiate a second app on the other node, then they can both use the same data from vuex? — coedycode
– coedycode, Commented May 12, 2020 at 8:31
@coedycode actually, I'm not using vuex. but vue. and it's not about using the same data but cloning the exact same app in another dom node — Ali Kleit
– Ali Kleit, Commented May 12, 2020 at 8:36
Why can't you just instantiate a second copy of the exact same app source code? What are you hoping to preserve by cloning that you can't get by instantiating a second copy? — coedycode
– coedycode, Commented May 12, 2020 at 8:38
Can I do that using plain js without having to instantiate that app directly in the html? (my main problem is that the node will be created later in the app so i have to clone that app or initialize it in it so i'm looking on how to do that) @coedycode — Ali Kleit
– Ali Kleit, Commented May 12, 2020 at 8:42
Sorry, I see what you mean now. I'm not sure if you can instantiate a second app inside the first app without getting problems, not when you're using an inline template in the html like that. If you were to instead move the main functionality and template to a vue component then you can spin up as many vue components as you like, nested or siblings. i.e. fire up the app, then mount the component as 'main' then when you need the second one conditionally mount it. — coedycode
– coedycode, Commented May 12, 2020 at 9:07

tony19 · Accepted Answer · 2022-07-15 01:29:14Z

If you want to mount your Vue app on different DOM elements, then you should be using mount() instead of the el:

const initMyApp = (el) => {
  return new Vue({
    data: {
      message: 'HEY'
    },
    methods: {
      sayHello: function() {
        this.message = 'HELLO!!!' + new Date().getMilliseconds()
      }
    },
    mounted: function() {
      console.log('mounted')
    }
  })
}


function moveAppFirst() {
  const vue1 = initMyApp()
  vue1.$mount('#app')
}

function moveAppSecond() {
  const vue2 = initMyApp()
  vue2.$mount('#appContainer')
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<button onclick="moveAppFirst()">DO FIRST</button>
<div id="app">
  <h2>Main</h2>
  <button @click="sayHello">Hello</button>
  <p>{{message}}</p>
</div>
<button onclick="moveAppSecond()">DO SECOND</button>
<div>
  <h2>Container</h2>
  <div id="appContainer">
    <button @click="sayHello">Hello</button>
    <p>{{message}}</p>
  </div>

</div>

More information on mount(): https://v2.vuejs.org/v2/api/#vm-mount

Collectives™ on Stack Overflow

How to clone vue instance to another dom node

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related