[Vuejs]-App has already been mounted. nothing show up when open page again

by

0👍

✅

I have fixed it by moving all the statements inside function block.

// main.js

window.renderSomething = function() {  
    const app = createApp(App);
    app.provide('$axios', axios);
    app.mount('#ticker-maintenance-host');  
    
}

0👍

You are mounting your App to the ID #ticker-maintenance-host

But all I can see in your HTML is an ID container.

Mount your app to the container, or add the ID #ticker-maintenance-host to your HTML.

#Edit:

You dont need to mount your view app on every render, just when the website is loaded initially.

Something like this straight out of the docs for Vue3 is how you register a vue app:

const { createApp, ref, computed } = Vue;
const app = createApp({
  setup() {
    const someValue = ref(10);
    const someComputed = computed(() => someValue.value * 10);
    return {
      someValue,
      someComputed
    }
  }
});
app.mount("#ticker-maintenance-host");

More reading here: Vue.createApp is not working but Is working with new Vue() method

Leave a comment